Have you ever considered developing your own WordPress theme? As a WordPress developer, it goes against our nature not to think about developing a creative theme that gives our website a professional look. A developer with some skills in HTML and CSS can easily create a WordPress theme from scratch- completely from scratch, means building from first to last. This tutorial will show you the entire process of building a custom WordPress theme. So, let's get started!

Prolific WordPress Theme from Scratch

Understanding the Theme Structure and How it Works

Before you kick start the development process, it's important to gain a basic understanding of what a WordPress theme is and how it works. First of all, you need to understand a basic difference between theme and a template. For many people, template and theme are the same thing. But there is a difference. A template is used to present the content of your website. It is made using one or a combination of codes that together make up a theme. A theme, on the other hand, is a collection or package of template files, images, etc., which defines the overall look of a web page.

Below is a list of all the main files that you'll be working with while developing a WordPress theme:
  • style.css
  • rtl.css
  • index.php
  • comments.php
  • front-page.php
  • home.php
  • single.php
  • single-.php
  • page.php
  • category.php
  • tag.php
  • taxonomy.php
  • author.php
  • date.php
  • archive.php
  • search.php
  • attachment.php
  • image.php
  • 404.php
You can see that how these files comprise a series of PHP template tags. The reason of using tags is that they inform WordPress where to add the content dynamically.

1. Creating Layout for Your Theme

Now the actual design of your theme will start taking the shape. For this, we are going to use a very simple layout featuring a header, footer, sidebar, and the main content area. There are few simple things that you need to do here. Just open any of the text editor of your choice. Here, I am using Dreamweaver for this purpose and setting it on the Code view.

Open your text editor, and start writing the following code and save it as index.html.

<title>Our Very Own WordPress Theme</title> 
<div id="wrapper"> 
<div id="header"> 
</div> <!-- close header --> 
<div id="content">
 <div id="main"> 
</div> <!-- close main content area--> 
<div id="sidebar"> 
</div> <!-- close sidebar --> 
</div> <!-- close complete content --> 
<div id="footer"> 
footer </div> 
<!-- close footer --> </div> <!-- close wrapper --> </body> 

Observing closely, you can see the use of div ids in the main body of the HTML file to layout our theme better. Now, in the next step, we will create individual files for each of the template file.

2. Creating Template Files

We will start this step by creating the index.php file. To create this file, open your text editor and start creating a new file and give it a name called index.php and insert the following code.

 <?php get_header(); ?>
 <div id="main"> 
<div id="content"> 
<h1>Main Content Area</h1> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<h1><?php the_title(); ?></h1> 
<h4>Posted on <?php the_time('F jS, Y') ?></h4> 
<p><?php the_content(__('(more...)')); ?></p> 
<?php endwhile; else: ?> 
<p><?php _e('Sorry, we couldn't find the post you are looking for.'); ?></p> <?php endif; ?> 
</div> <?php get_sidebar(); ?> 
</div> <div id="delimiter">
</div> <?php get_footer(); ?>

You can edit the code above as per your requirements in the text which reads “Main Content Area” between the <h1> tags. Apart from this line, changes can be made in the text which reads Posted on just a just after the <h4> tag. The lines can be modified if you want some changes in your blog. It's worth mentioning that since these are template files, whatever the change you'll made, it can be seen in the entire blog. 

Next, we will move on to create the remaining PHP files.


We will create the header.php file, which contains our website logo. For this, start creating a new file in the header.php, and then open the index.html and copy the following code.

<title>My Theme</title> 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> 
<div id="wrapper"> 
<div id="header"> <
h1>This is the header</h1> </div> 


Create the footer.php and start copying everything from the <div id= “footer”> and save it in the new file. 

 <div id="footer"> 
<h1>This is the footer</h1> 
</div> </div> < ?php wp_footer(); ? > 


The sidebar in a template showcases all the information that we want to display in the sidebar such as pages, posts, and categories related to a website. The sidebar.php is called from the index by using get_sidebar() ; tag, so that whatever you want to add to the sidebar.php will be reflected in the theme rightly.

<div id="sidebar">
<h2 class="sidebartitle"><?php _e('Categories'); ?></h2> 
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> </ul> <h2 class="sidebartitle"><?php _e('Archives'); ?></h2> 
<ul class="list-archives"> 
<?php wp_get_archives('type=monthly'); ?> 

This is the code that we are going to add to our sidebar.php to make it functional.
Using it, you can instruct your sidebar to go ahead and fetch the Categories and display them along with the Archives that are displayed on the monthly basis.

Creating the Main Content Area

So, now we have three files for our theme, let's move to create our main content area, which will present the main content of our website. For this, we will create a new style.css file.

{ display: block; 
border: 1px #000 solid; 
margin:0px auto; } 
#header { 
border: 2px #000 solid; } 
#content { 
width: 75%; 
border: 2px #000 solid; 
float: left; } 
#sidebar { 
width: 23%; 
border: 2px #000 solid; 
float: right; } 
#delimiter { 
clear: both;}
#footer { 
border: 2px #000 solid; } 
.title { 
font-size: 11pt; 
font-family: arial; 
font-weight: bold; } 

Running the code above will show your newly created theme. Simply activate it and start using it for your website.

You can go on further to add a logo, navigation, comments section, and several other features that could prove to be quite useful for your theme.

Wrap Up

That's all! By this point, you have successfully created a new WordPress theme from scratch. You can modify the theme as per your choice to make it a bit more impressive.

Sarah Parker

Maria Mincey is an software developer for Xicom Technologies, a web development company which delivers most comprehensive web applications and solutions for different industry verticals.

Post a Comment