PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Create Your Own Template

Posted by on 10th Aug 2008 | 14 comments

Creating your own WordPress template is not as complicated as you may think. A lot of people suggest to use the default template and modify that. Personally I disagree. If you’re capable of writing your own HTML markup and CSS then all you need to know are the template tags and the wordpress loop. The only theme file I would recommend copying is the comments.php file, and I’d recommend using the Classic theme’s file, not the default one.

The Design and Markup

You can create the design however you want. Work out how you want the main elements of your blog to be (posts, category list, pages, archives list if you want it, comments etc). Take your design and, ignoring any theme for the time being, code your design up into HTML and CSS. The only thing to bear in mind with your markup is the following:

  • Pages, categories, Archives and Links are output by default as unordered lists. You can change this but it’s probably a good idea to keep them as lists.
  • Whilst it’s not essential, it’s usually a good idea to have a div around each post.
  • Your search input box needs the name and id as ‘s’, however a method of get or post can be used.

Break It Up

You can split your new page up into at least 3 maybe 4 sections. You have your header, containing the generic top content shown on every page, footer, the generic bottom content on every page, your sidebar, if it doesn’t/cannot fit into the header or footer, and the main index page that contains everything which doesn’t fit into these files. Each of these files must be called header.php, footer.php and sidebar.php and index.php.

Index.php

In your index.php file you need to insert the following tags inside PHP tags:

get_header()
Put this where you’ve removed the header section.
get_footer()
Put this where you’ve removed the footer section.
get_sidebar()
If relevant, put this where the sidebar/menu content was.

This will then set up the index file to pull in the header, sidebar and footer in the relevant places.

Around your post we need to add the loop code. Right before the post starts (eg. the opening div tag that surrounds the post), insert the code

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Then after your post markup close the loop using

<?php endwhile; endif; ?>

You will then want to add the following tags to help construct the dynamic post:

the_permalink()
This echos out the full permalink of the post, used in the link around the post title.
the_title()
This echos out the post title.
the_category(‘,’)
This creates a comma separated list of all the categories that the post has been added to.
the_content()
Use this or the_excerpt() to display content from the post.
comments_popup_link(‘No Comments’, ’1 Comment’, ‘% Comments’)
Displays the number of comments received on that post. You can change the parameter content to suit your site, just keep them in the same order and use the percentage sign to get the X comments.

There are also plenty of other tags you may want to use. A couple of more popular ones are

the_ID()
This will echo out the ID of the current post.
the_date()
Echos out the date the post was written.
the_time()
Echos out the time the post was written.
the_author()
Echos out the name of the author of the post (usually linked to their own author page)

If your design is quite simple and your single post page is virtually identical to the front page then you may want to just have the index.php theme file power both pages. If so then you’ll also need to add the following tag just before the closing loop code that you added earlier:

<?php comments_template(); ?>

This will then pull in the comments.php file, which as mentioned earlier, I recommend you just copy the comment.php theme file from the Classic theme, and we can look at modifying that later.

Define Your Theme

To define your theme and make WordPress recognise it, you need to add the following to the top of your CSS file (which you need to call style.css).

/*
Theme Name: Put Your Theme Name Here
Theme URI: Put Your Site Address Here
Description: Give it a short description
Version: 1.0
Author: Your Name Here
*/

This information is read by WordPress and when you’ve uploaded your new theme (into its own directory under wp-content/themes/) and go to Admin – Design, you’ll see your theme as an option to be selected. If you want a thumbnail displaying too then create a screenshot of the theme and add it into your theme directory with the filename of screenshot.png or screenshot.jpg. This will also be automatically displayed by WordPress.

Next week I’ll write about how to edit your header, footer and sidebar files, ready to then set your theme live.


A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

14 comments - Leave a reply
  • Posted by Py on 10th Aug 2008

    Everyone bloging should know thing imo. A personal/custom template is a must if you ask me…

  • Posted by Yuen on 11th Aug 2008

    This is a very useful topic for new designer of WP.

    Thank you!

  • Posted by Sarah on 11th Aug 2008

    Cheers for the comments everyone, don't forget, there's more to come next week ;)

  • Posted by A. Georgiev on 11th Aug 2008

    Hello, I am blogger but this is new to me. Till now I used free templates from the net. But now I`ll try to make my own unique template. Thanks for th information!

  • Posted by Wooden Toys on 11th Aug 2008

    Great article, thank you so much :)

  • Posted by Lloyd Lopez on 11th Aug 2008

    My WordPress themes are mostly ready made but I modify them for my needs and to be somewhat unique to others using same theme. It doesn’t take too much of my time but I really want to have my very own theme that I build from ground up.

  • Posted by Eva White on 11th Aug 2008

    Your article is very useful. I have bookmarked it. I use to always find this whole Template creation very confusing and big task. but you seem to have simplified it beautifully. Thanks I will surely let you know after I have applied your procedure.

  • Posted by Aravind on 12th Aug 2008

    I always wanted to learn about this and this is a well-timed post.

    Thanks for this and waiting for more, next week :)

  • Posted by elefint on 15th Aug 2008

    thanks for tips, now it's easier for me to create a template

  • Posted by Chuck on 18th Aug 2008

    This is a great tutorial on creating a wordpress theme. Most tutorials I come across are more academic in nature and not really that helpful.

    Your voice is concise and stresses exactly what you need to do to get the bits put together in an index.php page.

    I will definitely be following this series, subscribed!

    Chuck

  • Posted by Ganesh on 20th Aug 2008

    Thanks for the tutorial. I'm horrible at creating themes, so I look at other themes code and just copy-paste them. And then I edit them. :twisted:

  • Posted by Armand on 21st Aug 2008

    Thanks. I would like to pimp my own wp themes.

  • Posted by destiny jones on 3rd Oct 2008

    hey!!!!!!!!!! I want to be a template maker because I think you will like my designs and I was drawing them in my designer book so that's all byeeeeeeeee!!!!!!!!!!!!!!!!!!!!!!

  • Posted by sam on 16th Dec 2010

    Thanks for sharing very important tips
    My recent post RockMelt-A Feature Packed Social Browser