Change language

A Step-by-Step Guide to Writing Your Own WordPress Template

Prerequisites: Before we start, you need to meet the following set of requirements.
  • You need to have a complete WordPress setup, both local and live hosting. If you would like to know more about starting with WordPress refer to this article .
  • Conceptual design like PSD or HTML CSS to follow throughout the development process.
  • A short introduction to programming at PHP . However, it is not required for this particular post, but it is still recommended.
Sphere
WordPress theme development - it is a long, tedious, never ending, but big programming problem. The development process depends entirely on how you want your theme to look. This post is just a tutorial and does not cover all the snippets required for a standard WordPress theme. After reading this article, you will rely heavily on WordPress Codex and WordPress StackExchange for further queries. Getting Started
With the background, let’s get started. The first thing you need to know is the fact that almost everything you do in WordPress is located in the wp-content directory. Everything else - it’s a WordPress CMS itself and you don’t want to mess with it.When you open the wp- content- > theme , you will find default WordPress themes like twenty fifteen, twenty fifteen, twenty thirteen, etc. start by creating a directory with whatever name you prefer. For this post, we’ll name it wpstart . A WordPress theme atleast needs two files to exist - style.cssand index .php Go to the wpstart folder and create these two files. In style.css insert the following comment. This tells the WordPress dashboard about theme details and meta information. / * Topic name: WP Start Author: FedUser Description: bare WordPress theme Version: 0.0.1 * / Now switch to your WordPress dashboard and click “ Appearance "> "Themes" . You will find WP Start in your theme collection. Go ahead and activate this theme and then visit the site. And voila! You have technically created your own theme, all by yourself. Of course it doesn’t do anything except that it has a pure white screen. This is where index.php comes into play.Open index.php in a text editor and write the following code. < html > < body > < h1 > This is a sample WordPress theme. < / h1 > < / body > < / html > Visit the site again and get your first WordPress template. Divide and Conquer
To develop a standard WordPress theme, you need to divide all the work into sections. This is not necessary since you can do everything in index.php, but good programming practice assumes modularity. For this particular post, we will divide all of our work into four sections, viz. header, footer, sidebar, and content. According to these sections, we will create four different files, namely header.php, footer.php, sidebar.php and content .php.
  • header.php : for this particular example, this file will do the following;
    • Define all meta tags and link tags inside for HTML.
    • Display site branding like name and description.
    • Provide navigation across different pages.
    With this in mind, let’s code the title of our theme. < html > < head > < meta charset = "utf-8" / > < meta name = "viewport" content = "width = device-width, initial-scale = 1" / > < title > WP Start < / title > < link rel = "stylesheet" href = " https://maxcdn.bootstrapcdn.com/bootstrap/ 3.3.7 / css / bootstrap.min.css " integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u" crossorigin = " anonymous " / > < / head > < body > < nav > < / nav > Now there is one thing I want to bring to your attention ... You can see how hardcoded the title of our site is. This means that the title will remain the same "WP Start" no matter which site you use the theme on. If the author needs to change it, he must manually edit the code to do so. To avoid manual template customization, WordPress provides various function calls to dynamically address these situations. In this particular case, I want the title to be the name of the site / blog. To do this, I will replace
     < title > WP Start < title > 
    с
     < title >  < / title > 
    This is called embedding a small piece of php in HTML. (Technically we write HTML in a php file. So we embed HTML in php code.)So header.php with some extra code becomes; < html > < head > < meta charset = "utf-8" / > < meta name = "viewport" content = "width = device-width, initial-scale = 1" / > < title > php echo get_bloginfo ("name"); ?> < / title > < link rel = "stylesheet" href = " https://maxcdn.bootstrapcdn.com/bootstrap/ 3.3.7 / css / bootstrap.min.css " integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u" crossorigin = " anonymous " / > < link rel = "stylesheet" href = " /style.css "/ > php wp_head(); ?> < / head > < body > < nav class = "navbar navbar-default" > < div class = "container" > < div class = "navbar-header" > < a class = "navbar-brand" href =" "> < h3 class = "site-branding" > php echo get_bloginfo ("name"); ?> < / h3 > < / a > < / div > < ul class = "nav navbar-nav navbar-right" > < li class = "active" > < a href = "#" > Home < / a > < / li > < li > < a href = "#" > Contact < / a > < / li > < li > < a href = "#" > About < / a > < / li > < / ul > < / div > < / nav > Additional php excerpts used in this code:
      
    This is to get the template directory so that additional resources like CSS, JS, fonts, etc. can be found
      
    This will reflect the URL of the site’s home page.
  • footer.php : This is the file we will add whatever we want in the site footer, like a custom footer, script tags, etc. Also, HTML tags that start in header.php are closed in that file. < footer class = " site-footer " > < div class = "container" > < div class = "row row-30" > < div class = "col-md-4 col-xl-5" > < div class = "pr-xl-4" > < h3 > < a href = "" > php echo get_bloginfo ("name"); ?> < / a > < / h3 > < p > php echo get_bloginfo ("description"); ?> < / p > < p > © 2018 FedUser. All Rights Reserved. & Lt; / p > < / div > < / div > < div class = "col-md-4" > < h5 > Contacts < / h5 > < dl class = "contact-list" > < dt > Address: < / dt > < dd > 798 ABC Nagar, JKL, Rajasthan < / dd > < / dl > < dl class = "contact-list" > < dt > e-Mail: < / dt > < dd > < a href = "mailto: #" > [email protected]< / a > < / dd > < / dl > < dl class = "contact-list" > < dt > Phone No.: crossorigin = "anonymous" > < / script > < li

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

Common xlabel/ylabel for matplotlib subplots

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Why do I get "Pickle - EOFError: Ran out of input" reading an empty file?

12 answers

NUMPYNUMPY

Flake8: Ignore specific warning for entire file

12 answers

NUMPYNUMPY

glob exclude pattern

12 answers

NUMPYNUMPY

How to avoid HTTP error 429 (Too Many Requests) python

12 answers

NUMPYNUMPY

Python CSV error: line contains NULL byte

12 answers

NUMPYNUMPY

csv.Error: iterator should return strings, not bytes

12 answers


Wiki

Python | How to copy data from one Excel sheet to another

Common xlabel/ylabel for matplotlib subplots

Check if one list is a subset of another in Python

sin

How to specify multiple return types using type-hints

exp

Printing words vertically in Python

exp

Python Extract words from a given string

Cyclic redundancy check in Python

Finding mean, median, mode in Python without libraries

cos

Python add suffix / add prefix to strings in a list

Why do I get "Pickle - EOFError: Ran out of input" reading an empty file?

Python - Move item to the end of the list

Python - Print list vertically