WordPress Theme Development From Scratch

Wordpress Theme Development f

If you are planning to make your own theme then follow this guide.


Download WordPress from wordpress.org & install it at your local host.

WordPress download link https://www.wordpress.org/

Now, install xamp or wamp server & start Apache, MySql service at XAMP control panel.


Check that server at locahost working or not. Put this URL http://localhost at browser like Firefox /Chrome or safari.

Before installing wordpress at local server, create database at MySql or opening this URL



We have to give your theme a unique name, which isn’t necessary if you’re building a theme for your website only. Regardless, we need to name your theme to make it easily identifiable upon installation.

Now, go to theme directory.

Here it is C:\xampp\htdocs\developtheme\wp-content\themes

Create new directory for example, we have given theme name creative.


Now, login to wordpress admin panel

In this case http://localhost/developtheme/wp-admin

If you check Appearance section at WordPress dashboard section, in my case, by default WordPress theme Twenty Seventeen activated.

This tutorial further assumes you have your HTML template arranged left to right: header, content, sidebar, footer. If you have a different design, you might need to play with the code a bit. It’s fun and super easy.

Before you start creating the theme, you should decide how the layout of your website will look like. In this tutorial we will build a WordPress theme that consists of a header, sidebar, content area and footer, as shown below:

To do this we will have to create the following files into the creative 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++, Edit Plus, Dreamweaver) or upload them via FTP or you can use the File Manager tool in your cPanel to create the files directly on your hosting account.

Add the following information at the very top of the newly-created style.css:

/*Theme Name: Your theme’s name Theme URI: Your theme’s URL Description: A brief description of your theme Version:1.0 or any other version you want Author: Your name or WordPress.org’s username Author URI: Your web address Tags: Tags to locate your theme in the WordPress theme repository */

Do not leave out the (/*…*/) comment tags. Save the changes. This info tells WordPress the name of your theme, the author and complimentary stuff like that. The important part is the theme’s name, which allows you to choose and activate your theme via the WP dashboard.

Now let’s take a closer look at each file and what it should contain:


Basically, 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.

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.

 index.php 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. 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

The sidebar.php file

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).

The footer.php file

You should add these lines to the footer.php file:

With this code we add a simple FOOTER label. Instead of this code you can add links, additional text, the copyright information for your theme and additional objects.


The style.css file

Add the following lines to the style.css file:

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.

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:

wordpress theme development

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.

From now on you can modify the CSS file, add images, animations and other content to your theme in order to achieve the looks you want for your blog!

After activation of your new theme, click on theme details at wordpress admin Appearance -> Themes, you will see updated screenshot of new theme. 

You can use photo editing software Photoshop to design screenshot.png file.

screenshot wordpress

About SAM

I am expert wordpress developer and internet marketer.

View all posts by SAM →