Whatever reason you are here to Today, I will show you how to create a simple WordPress theme. Follow below guide to create your theme from scratch.
Choosing the Name & Layout for Theme
First of all give your theme a unique name, create a sub-folder in the wp-content/themes directory in your WordPress folder. For example, create a folder "demosite_theme". The name of the folder should correspond to the name of the theme you want to create. To do this you can use either your favorite FTP client or the File Manager tool in your cPanel.
Before you start creating the theme, you should decide how the layout of your website will look like. In this tutorial I will build a WordPress theme that consist of a header, content , sidebar and footer as shown below:
To do this you will have to create the following files into the tutorial_theme directory:
header.php - This file will contain the code for the header section of the theme.
index.php - This is the main file for the theme. It will contain the code for the Main Area and will specify where the other files will be included.
sidebar.php - This file will contain the information about the sidebar.
footer.php - This file will handle your footer.
style.css - This file will handle the styling of your new theme.
You can either create those files locally with a simple text editor(like notepad for example) and upload them via FTP or you can use the File Manager tool in your cPanel to create the files directly on your hosting account.
Converting your HTML Template into PHP Files
In this file you should add the following code:
This is simple HTML code with a single line containing a php code and a standard WordPress function. In this file you can specify your meta tags such as the title of your website, meta description and the keywords for your page.
Right after the title the line we add
tells WordPress to load the style.css file. It will handle the styling of your website.
The part of the line is a WordPress function that actually loads the stylesheet file.
Next, we have added the beginning of a "div" with class wrapper which will be the main container of the website. We have set class for it so we can modify it via the style.css file.
After that we have added a simple label HEADER wrapped in a "div" with class "header" which will be later specified in the stylesheet file.
The code in this file begins with
which will include the header.php file and the code in it in the main page. It uses an internal WordPress function to do this. We will explain this in details later in this tutorial. Then we have placed a Main Area text to indicate which section of your theme is displayed in this area.
The next few lines consist of a PHP code and standard WordPress functions. This code checks whether you have posts in your blog created through the WordPress administrative area and displays them.
Next, we include the sidebar.php file with this line
In this file you can display your post categories, archives etc.
After this line, we insert an empty "div" that will separate the Main Area and the Sidebar from the footer.
Finally, we add one last line
which will include the footer.php file in your page.
In the sidebar.php we will add the following code:
In this file we use internal WordPress functions to display the Categories and Archives of posts. The WordPress function returns them as list items, therefore we have wrapped the actual functions in unsorted lists (the < ul > tags).
You should add these lines to the footer.php file:
With this code we add a simple FOOTER lable. Instead of this code you can add links, additional text, the copyright information for your theme and additional objects.
This simple css file sets the basic looks of your theme. Those lines set the background of your page and surround the main parts of your site with borders for convenience.
At this point your website should look like this:
As we have previously mentioned, internal WordPress functions are often used in the code of the theme. You can take a look at the complete Function Reference at the official website of WordPress for more information about each function.
Thats easy, right? from now on you can style the CSS file as you like, add images, animations and other content to your theme in order to achieve the looks you want for your blog!