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:

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

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:

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:

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

Step – 4:

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

After adding the WordPress tags the code will be:

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:

After adding the WordPress tags the code will be:

Step -7:

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

After adding the WordPress tags the code will be:

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:

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 –

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:

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:

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!!