Build a Custom WordPress Theme from Scratch

In this tutorial you will learn how to convert a simple HTML template into WordPress Theme. I am writing this tutorial with in mind that you have enough knowledge on HTML, CSS and PHP. If you’re confident with your CSS and HTML, it’s not hard at all to step up to the challenge of building a custom WordPress theme. Discover how the static design is split up into the various WordPress theme files.

I have created a simple HTML layout to convert that into WordPress Theme. See the below screen shot:

html template layout for custom wordpress theme

Check the HTML code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>WordPress Custom Theme</title>
<link rel=”stylesheet” type=”text/css” media=”all” href=”style.css” />
</head>
<body>
<div id=”wrap” style=””>
<div id=”header” style=” background:#EEEEEE”>
<h1 class=”site_title”><a href=””>Tutpub.com</a></h1>
</div>
<!–/#header–>
<div id=”main”>
<div id=”container” style=”height:550px;”>
<div class=”post_cont”>
<a href=”#”><h2>Post Title will goes here</h2></a>
<div class=”thumb_img”>
<img src=”images/default.jpg” />
</div>
<p>Post summary / excerpt will goes here 1</p>
</div>
<div class=”post_cont”>
<a href=”#”><h2>Post Title will goes here – 2 </h2></a>
<div class=”thumb_img”>
<img src=”images/default.jpg” />
</div>
<p>Post summary / excerpt will goes here 2</p>
</div>
<div class=”post_cont”>
<a href=”#”><h2>Post Title will goes here – 3</h2></a>
<div class=”thumb_img”>
<img src=”images/default.jpg” />
</div>
<p>Post summary / excerpt will goes here 3</p>
</div>
</div>
<!–/#container–>
<div id=”sidebar” style=”height:550px; background:#FFFFCC;”>
<h3>Categories</h3>
<ul id=”categories”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
<h3>Pages</h3>
<ul id=”categories”>
<li><a href=”#”>PHP</a></li>
<li><a href=”#”>JAVA</a></li>
<li><a href=”#”>JOOMLA</a></li>
<li><a href=”#”>WORDPRESS</a></li>
<li><a href=”#”>DRUPAL</a></li>
</ul>
</div>
<!–/#sidebar–>
</div><div class=”clr”></div>
<!–/#main–>
<div id=”footer” style=”background:#000000; color:#FFFFFF;”>
&copy;<a href=”#”>tutpub.com</a>&nbsp;|&nbsp;Powered By <a href=”#”>Wordpress</a>
</div>
<!–/#footer–>
</div>
<!–/#wrap–>
</body>
</html>

Before getting started about the build process, it’s important to know how WordPress themes work. If we looked at any prebuilt theme, we can notice that it’s all contained in a folder, and commonly 12 core files are visible. Some themes, including the Default WordPress theme, include more files which allow extra customization, but those are not mandatory additions. Here we will describe about the core development about a new custom wordpress theme. Here is the simple description of core files:

  • index.php – The core file that loads your theme, also acts as the homepage (unless you set your blog to display a static page).
  • style.css – All the styling for your theme goes here. This file also store the theme name, author name, author website, theme descriptions information.
  • functions.php – this file is used to configure the WordPress core, without editing core files.
  • header.php – Contains header information as well as the top part of site.
  • sidebar.php – Contains everything you liked to appear in a sidebar.
  • footer.php – Contains everything you liked to appear at the bottom of your site.
  • single.php – The template file that’s used when viewing a single post.
  • page.php – Same as single.php, but used as WordPress pages.
  • search.php – The template file used to display search results.
  • archive.php – The template file used when viewing categories, dates, posts by author, etc.
  • 404.php – The template file that displays when a 404 error occurs.
  • comments.php – basically called at the bottom in single.php to show and get comments from visior.

 

There are many tags are defined in WordPress library. These tags tell WordPress where to insert the dynamic content. These tags are used to built an WordPress theme. A good example is the <?php the_permalink(); ?> tag, which pulls the post url that basically used at anchor tag. To browse stack’s of template tag visit WordPress Codex. I’ve seen many themes that include some complicated PHP coding to achieve a function that’s already available as a simple template tag. So, learn the tags carefully.

Let’s get started for the custom WordPress theme. I have added a download link at the bottom of this tutorial that will enable you to download the HTML template for your better practice. We will first split the HTML template into theme files. Then modify and add necessary code to those files.

Step – 1:

Suppose the name for the theme is “tp_simple”. Lets create a folder name “tp_simple” in the “wp-content/themes/” as template directory. Now we will create all core files that I mention above.

 

Step – 2:

Open the “style.css” file. All the details (such as-theme name, theme author, author link, website info, etc) of a WordPress theme are defined within the StyleSheet. At the top of our style.css add the following code:

/*
Theme Name: tp_dimple
Theme URI: http://tutpub.com/
Description: Simple Tutorial Theme Development
Version: 1.0.0
Author: Shah Alom
Author URI: http://bd.linkedin.com/in/shahalom
*/

 

Now You can go to WordPress admin panel->Apperance->Themes. You can notice that the “tp_simple” theme is listed in the available themes section. Don’t get so excited, we will not activate it now.

Now you can copy all the CSS from the HTML template into the “style.css” of WordPress Theme.

 

Step – 3:

Copy the top part from HTML template to header.php. See the below screen shot:

html header template

After adding the WordPress tags the code will look like below :

wordpress theme header

 Step – 4:

Copy HTML code in the sidebar div to the sidebar.php file. See the below screen shot:

html template sidebar

After adding the WordPress tags the code will be:

wordpress theme sidebar

 Step – 5:

To add featured image / thumbnail feature in your project add the “’post-thumbnails” support in your function.php. Code:

<?php
add_theme_support( ‘post-thumbnails’ );
?>

 

Step – 6:

Copy main div code of HTML template to index.php. See the below screen shot:

html template body

After adding the WordPress tags the code will be:

wordpress theme screen shot

 

Step -7:

Copy HTML code of footer div to the footer.php file. See the below screen shot:

html template footer

After adding the WordPress tags the code will be:

wordpress theme footer

 

Step – 8:

When visitor click on a link to see full post, single.php page is executed. Code of single.php is almost same as the codes in index.php. You need to three(3) changes –

  • add <?php the_content(); ?>by replacing the <?php the_excerpt(); ?> so that full post will show
  • add the comment template
  • delete the pagination tag.

See the screen shot:

wordpress theme single.php screen shot

Step-9:

Copy entire code in single.php and paste those codes to page.php. Basically we do not use comment form in page. So, you can delete the <?php comments_template(); ?>. For example –

wordpress theme page.php screen shot

Step – 10:

Copy entire code in index.php and paste those codes to archive.php. You should add a title about the category or date. for example see the below code:

wordpress theme archive.php screen shot

 Step – 11:

Now it’s time to create a comment template. It was one of the tough thing for me. But I got a technique that I copy the template.php from default theme and customized as necessary for the project. The hard part is finding the CSS hooks to style up the comments. Mozilla firebug addons make it easier. The comments file just has a few parameter options here and there that you might want to tweak. We should first in mind is the avatar_size parameter, which tells WordPress how large will be the user’s gravatar image. Check the example:

wordpress theme comments.php screen shot

In the wp_list_comments function you can pass some parameter (like – avatar_size, type) . For example –

<?php wp_list_comments(‘avatar_size=64&type=comment”); ?>

 

Step – 12:

The content of search.php and 404.php are same. One think to remember is that adding the <?php the_search_query(); ?> tags which will display the user’s search term as a title. For the 404 page your creativity will come into play. This template can be configured to display whatever error information you like, just remember to include the usual get_header();, get_footer(); tags where necessary.

 

Wish all things are done for a WordPress theme to be work nicely. So, it’s time to install a test and see how it all works. Filling out a temporary install with a couple of dummy posts can really help test drive a theme surface any errors. If you take a look at the source code, you’ll see how each of the template files has been inserted into the correct place, as well as how content has been dynamically generated by the template tags. Download the HTML layout for the custom theme.

Well, if you feel any confusion regarding to this tutorial, you can message me using the comment form. I will try my best to reply as soon possible. Cheers!!

 

Author Info

Shah Alom

Hi, This is Mohammad Shah Alom, My passion is Programming & Web Development. I am Founder of Micro Solutions Bangladesh. My Facebook profile shahalom1983 & Twitter Profile shahalom_83

  • Sallie Navas

    Thankyou so much for this interesting blog post, worth a read.

  • Wow, that’s a really cleevr way of thinking about it!