Get our posts emailed to you with our monthly newsletter, subscribe here.

In this tutorial you can watch as I walk you through exactly how to easily build your own WordPress Theme. This is the final post in the three part WordPress tutorial series, detailing how to create your own WordPress theme.

You should look at the past two tutorials where I have showed you how to create the design:

How To Design A Clean And Minimal WordPress Theme

Create a Clean and Minimal WordPress Theme with HTML/CSS

Creating Your WordPress Theme

When creating a WordPress theme I first create all the blank PHP/CSS/JS file I will need in a theme folder. My theme folder is called ‘minimalwp’.

Files in this folder, such as header.php, footer.php are called into the index.php file which helps build the page you see on screen, depending on what page you are on, WordPress will pull in different files from the theme folder. WordPress themes are fairly easy to build once you have an understanding of the template tags which provided the dynamic functionality of your blog.

The minimalwp theme is fairly simple in its construction, using mostly standard template tags, my theme folder looks like this:

Theme Details

Every theme you create you should document the basic information so the user can read about it before they install. Insert this at the top of your style.css to provide theme information.

[php] /*

Theme Name: minimalwp
Theme URI: http://www.designwoop.co.uk/
Description: A premium clean and minimal WordPress theme.
Version: 1.0
Author: David Martin @webadelic
Author URI: http://www.webdelic.co.uk

*/

.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignright {
float: right;
margin-left: 15px;
}

.alignleft {
float: left;
margin-right: 15px;
}
[/php]

You will also need to create a nice screenshot of your theme design. All this information will be displayed as below when you activate a new theme.

Template: Header.php

Last week I created a single html file of the whole theme, now I will break up that single file to get the html elements for each file in my theme folder.

I take the header contents from my mock up file and paiste it directly into my header.php file. I now have populate the old static html attributes with the dynamic WordPress theme tags.

Click to enlarge header.php

After I have pasted my mock-up code into my WordPress template, It’s time to go through and add in the WordPress template tags.

Just before the closing </head> tag, the wp_head();  tag is added so WordPress can insert additional code into the head itself, this comes in handy when using other plugins.

Common template tags you will use will be:

Title replacement –

[php]<?php wp_title(); ?>[/php]

CSS link –

[php]<code><?php bloginfo(‘stylesheet_url’); ?></code>[/php]

Theme URL –

[php]<?php bloginfo(‘template_url’); ?>[/php]

Template: Index.php

This file is what will generate all your posts on your blog homepage, at the top of this file I include <?php get_header(); ?> and
<?php get_sidebar(); ?> and and the very bottom of the file I also include <?php get_footer(); ?>.

These include functions will include the files, header.php, sidebar.php and footer.php into my index.php template.

Click to enlarge Index.php

I will take the html from my mock up template into the index.php file, this will be the html for one post. This html is inserted into the WorePress loop and will generate the layout for each blog post. Common template tags I will use here are <?php the_permalink(); ?> to get the link to a post, <?php the_title(); ?> to get the post title, <?php the_excerpt(); ?> to get the post excerpt and <?php the_tags(”,’, ‘,”); ?> to generate the tags for each post within the loop.

Template: Archive.php/Tags.php

The archive and tags template are almost identical to the index file, the only difference in this instance is I include a few extra title tags. When the user comes to your blog, they are served the index.php template. On archive and tags pages they are served slightly different versions of the index template. You can customize these as much or as little as you wish. Check out the various conditional tags you can use.

Click to enlarge Template.php/Tags.php Title template

These templates are exactly the same as the index.php file, but I insert these lines of code to set the page titles to the relevant page.

Template: Page.php/404.php

This template files are similar, in the fact that they are really just stripped down versions of the index file. We still need to include the <?php get_header(); ?>, <?php get_sidebar(); ?> and <?php get_footer(); ?> functions into our page. The page template includes the loop that generates the post content, although there is no need to include tags that pull in ‘Read More’ button as it will only display one single page. For the page we are using this template tag – <?php the_content(); ?>, rather then <?php the_excerpt(); ?>. Using <?php the_content(); ?> will display the full post/page content, rather then just the excerpt.

Click to enlarge Page.php

Click to enlarge 404.php

You can customize the 404 page as much or as little as you wish with standard html/css, the 404.php template is even more stripped out then the page.php template. This page gets served to the user if they follow a bad link or when something most terrible happens to the user with life in general…

Template: Single.php/Comments.php

The single.php template is served to the user, whenever they are viewing a individual blog post. The structure is much the same as the index template, however just like a page we remove the template tags that call in our read more buttons and again replace <?php the_excerpt(); ?> with <?php the_content(); ?>.

An important template tag to include in the single.php file is of course, <?php comments_template(); ?>. If you want people to comment on your blog posts and build  a conversation around your content comments are a great platform for this. Using the comments function will includ the comments.php file into your blog post.

Click to enlarge Single.php

The comments.php file looks a little more complex than most other templates we have used. Inside is alot of comment specific tags that enable you to build  acomplete comments section with ease, so dont be put off!.

<?php comments_number(); ?> is a simple tag used to display the number of comments on a post.

The comments file uses its own loop, <?php if ( have_comments() ) : ?> this checks to see if there are any comments on the post, if so, the list of comments is included using just one tag: <?php wp_list_comments(); ?>. The comments file as standard is very customizable, having its own set of pagination links, this combined with WordPress’s own discussion settings allow you to split comments over multiple pages.

Click to enlarge comments.php [2]

Template: Footer.php

This is the final template we will use in the theme, it has been called in pretty much every template so far, in this I close up the div tags I opened in the header.php template, I also included the typekit JS and the call to the external JS files.

An important function to call in the footer is <?php wp_footer(); ?>, some plugins will included their own JS calls which are called in within this function, infact without it, some plugins will break your theme!

Making Your Own WordPress Widgets

In the footer of my theme I am including two widgetized areas, here the user will be able to add in any widgets or plugins  that they download, for this example I am just including a page list and a text box for an about section.

You will need to create a functions.php file if you have not done so, within this file you will need to do this:

[php]if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘NAME_YOUR_WIDGET’,
‘before_widget’ => ‘<div>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
));[/php]

This would look like this in the functions.php file:

Once you registered and named your ‘sidebar’ as WordPress calls it you will be able to drag and drop widget in within the admin panal:

The Final Theme

Building your own WordPress theme is not to hard, it involves a little work and some research. Essentially you are taking a CSS/HTML template and and splitting the code into different PHP files and adding WordPress Template tags.

Take a look at the WordPress Codex to read up on all the available template tags.

The theme is fully constructed and it is now time to do some testing and bug fixes. In the mean time, take a look at it.

View The Demo

Take a look at the final WordPress theme demo, this is just the basics, a lot more can be done from here. You can also see the theme I created in the real worl: Take a look at LogoDsgn.com

– Check out some premium WordPress themes if you do not feel you can design or code a theme.

Posted by David Martin

David Martin is a WordPress developer & entrepreneur from the UK. He owns DesignWoop, CardDsgn and WhoDesignToday. Catch up with David on Twitter.

5 Comments

  1. I am having trouble with the header.php file->unexpected $end at the last line.

  2. Hi David, thanks for this tutorial. I’m not a web developer/designer, though I have some basic knowledge. Nevertheless, I couldn’t create the theme.

    Would you mind offering this final theme as a download? I would like to adapt it to a personal site.

    Kind regards.

    1. Hi,

      I am not offering the theme for download just yet, but I do plan to in the coming months. Stay tuned.

      What did you get stuck on?

      Thanks.

    2. I got stuck on the php implementation part. I changed a lot of WP themes, but creating one seems a whole other thing. I’m a designer with a little knowledge of html/css, but programming is not my cup of tea.

      Maybe I’ll give this theme a try anyway ;)

  3. Thanks David for this useful info about WP.
    Improving daily my skills thanks to guys like you!

Comments are closed.