Line25

How To Build Your Own WordPress Theme

Read the full post

You don’t need to be a PHP whizz to be able to put together your very own custom WordPress theme. If you’re clued up with your general web design and development skills and can easily put together a HTML/CSS based website, you’re ready to move onto WordPress theme development to give your blog its very own design.

Particle WordPress theme

For this walkthrough, we’ll be using a theme I recently built as an example. If you were around last week, you’ll have seen how the design was built from a concept PSD right through to a coded mockup in HTML/CSS. Now, let’s take the static code and inject some simple PHP template tags to give that dynamic functionality of a WordPress theme.

Before getting stuck in, it’s useful to spend a few moments familiarising yourself with how WordPress themes work. WordPress themes are made up of multiple files, and each one is either called from the index, or is used when viewing a particular page on the website, such as a post view or an archive. So you’ll basically be splitting up your HTML across the various template files.

Setting up the theme structure

Wordpress file structure

Create a new folder and give it the name of your theme. Within this folder copy across the images, Javascript and CSS files that are used in your static mockup. You’ll also want to create a number of empty PHP files to correspond with the template files listed above.

In your style.css file, add the following code to the very top of your file. This is used by WordPress to identify your theme in the admin dashboard.

/*
Theme Name: Particle
Theme URI: http://www.blog.spoongraphics.co.uk/
Description: A premium theme by Chris Spooner of Blog.SpoonGraphics.
Version: 1.0
Author: Chris Spooner
Author URI: http://www.blog.spoongraphics.co.uk
*/

You might also want to add some extra CSS styling to the bottom of your stylesheet. This will allow the user to align elements using the WYSIWYG editor in a post or page.

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

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

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

Template file – header.php

It makes sense to work from the top downwards, so I always start with the header.php template file. Paste in the HTML from your static mockup ranging from the doctype right down to where the main content is due to start. Then you can go through the code and replace elements with the special PHP template tags that allow WordPress to take control. Having a copy of the Default WordPress theme to hand is useful in order to copy across tags, otherwise the WordPress Codex is like your very own instruction manual for each and every template tag available.

Starting at the top, the title is firstly switched out for a couple of template tags that will insert a WordPress generated title for each page of the site. Then, the URL to the stylesheet can be swapped for a special template tag that is reserved specifically for this job. We can also use <?php bloginfo('template_url'); ?> to render the URL to the theme directory, to easily add any additional CSS or Javascript files. Just above the HTML </head> the template tag <?php l25_head(); ?> is placed. This tag tells WordPress where to insert any additional code from plugins etc, that need to sit inside the document head.
Further down the code, we come to the categories list. Inside the <ul> the WordPress template tag <?php l25_list_categories(); ?> can be used to dynamically insert the list of categories, neatly contained within <li> tags. This tag itself also has a range of parameters. show_count=0 removes the default post count from beside the category title, title_li= removes the default header above the categories list, hide_empty=0 ensures that all categories are visible, even if they are empty and finally exclude=1 removes the category with an ID of 1 from the list, which is always the ‘uncategorized’ category.

Template file – index.php

The index file acts as the base for all the other template files. It’s also the file that is called to display the homepage. The index displays all the recent posts, and also calls the header, sidebar and footer files to render a complete page.

At the top of the index file, <?php get_header(); ?> calls the header.php file so that all the code from within this file is inserted above the content in the index when the web page is rendered. This is followed by the WordPress loop, which essentially checks for new posts and displays them accordingly. Each post is contained within a div which is given a range of CSS classes from the <?php post_class(); ?> tag, which makes it a breeze to style up certain posts differently, for instance posts within category X, or that have tag Y.
The standard HTML in the static mockup can then be switched out for dynamic tags, which WordPress will use to insert the relevant information about each post. For instance the link to the post is displayed using the <?php the_permalink(); ?> tag, and the title of the post is rendered with the <?php the_title(); ?> tag. There are all kinds of tags available, allowing you to render all the details about your posts you could ever wish for, but other popular uses are <?php the_category(', '); ?> to show which category the post was saved in, and <?php comments_number('No Comments','1 Comment','% Comments'); ?> to show the number of comments the post has.
Pagination links can be added after the endwhile, so links to previous pages appear once the ‘posts per page’ limit in the settings has been reached. At the bottom of the index, the sidebar and footer files are called, just like the header. These will be inserted exactly where the tags sit in the code.

Template files – archive.php & search.php

The archive template file acts in a similar way to the index, in that it’s used to display a list of all the recent posts. The archive template file is used when a user views a category archive, an archive by date, or any other archive view, such as by author or tag.

The archive.php file is almost identical to the index.php file, but it does have a couple of additions at the top, in order to identify and give a visual clue to the user where they are on the site. By using if (is_category()), WordPress will check whether the user is browsing the category archives, or the date archives and display a title accordingly. There’s also other options that can be put to use here. If your theme makes use of multiple authors or shows tags publicly, you could also insert snippets to display titles for these scenarios.
The search.php file is also pretty similar. This uses the same code to generate a list of posts, and just like the archive template file a title can be inserted at the top to give a visual clue for the user. The code <h2 class="title">Search results for <?php the_search_query(); ?> </h2> displays a heading that includes the search query the user entered.

Template files – page.php and single.php

The page.php and single.php template files are used to render full pages and posts. Each file still contains the loop, but instead of displaying multiple posts like the index.php or archive.php, page.php and single.php show the whole content for just one entry.

Both page.php and single.php start by calling the header template file, followed by the WordPress loop to check for the content. Just like the archive.php and index.php files, the post div includes <?php the_title(); ?> to render the post or page title, followed by <?php the_content(''); ?>, which is where all the content from the WordPress editor will be inserted. In the single.php file, the comments template is also loaded, which will display the comments section below the post content, but before the sidebar and footer are loaded.

Template file – sidebar.php

The sidebar.php template file contains all the sidebar content, so that it can be easily called from any of the other template files. The sidebar might contain a list of categories, pages or subscription options.

The sidebar.php template for this particular theme starts with a link to the built in RSS feed. The tag <?php bloginfo('rss2_url'); ?> inserts the URL to the RSS2 feed inside the HTML anchor. Next up, a list of pages are rendered in list format, just like the categories list in the header. <?php l25_list_pages('title_li='); ?> does the job, with the parameter title_li= removing the default heading from the list.

Template file – comments.php

The comments file is called from the single.php template file. This file takes care of displaying all the post comments and the comment form.

The majority of the actual comments list is automatically generated by WordPress from the <?php l25_list_comments('avatar_size=64&type=comment'); ?> template tag. The two parameters setup the size of the gravatar, and render only comments – no trackbacks. The comments section has its own pagination links, with <?php previous_comments_link('Older') ?> and <?php next_comments_link('Newer') ?> generating previous and next links. The comments template is then finished off with a form, allowing users to submit a comment.

Template file – footer.php

The footer template file finishes off the webpage and closes out the HTML and body tags. The footer for this particular theme is pretty simple, it just includes a couple of links and a back to top anchor.

You have the option of including all kinds of template tags in the footer, such as displaying the list of categories, a list of tags, or using it to show an archives list. Any of the tags used elsewhere in the theme could be put into practice in other areas. Just like in the header, there’s a special tag used to reserve a space for any additional code that might be inserted by WordPress plugins etc. <?php l25_footer(); ?> identifies this area, which is placed just about the closing body tag.

Pulling everything together

Particle WordPress theme

This covers all the basic theme files needed to get your custom theme up and running. When you test your theme for real, you’ll see that all the individual files are brought together to form a complete webpage, and that certain template files are used depending on where you’re browsing on the website. Don’t forget, you can also create a custom 404 page using the 404.php template file, and use custom page templates to enhance your theme with custom page layouts.

If you’re interested in getting your hands on the Particle theme, it will soon be available to Access All Areas members of Blog.SpoonGraphics.

View the final theme demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

49 Comments

  1. Jens Kelch says:

    Thanks for this great article.
    I bookmarked this site.

    Greetings from Germany

  2. Manjit Sohal says:

    I am a web designer and I have only just started designing my own themes for WordPress. Althougha very daunting task, I am finding this article very useful! Thanks

  3. Manjit Sohal says:

    I am a web designer and I have only just started designing my own themes for WordPress. Although a very daunting task, I am finding this article very useful! Thanks

  4. Milan Shaw says:

    Good article. I have made bookmark for.

  5. Thank you soooooo much for this one! WP theming is becoming a must for any web designer's toolbox and you've just broken it down so clearly. I look forward to learning more from you :)

  6. Alan says:

    Great article Chris, I'm currently building a new version of my portfolio, and I'm going to add an independant blog rather than one built in like just now(joomla).

    I'm going to start using WordPress, mainly because of the good comments integration, so this will help me no ends.

    Thanks again Chris.

  7. Brussells says:

    Awesome! A great follow up from the PSD to HTML article posted previously.

    Is there any way to be able to print out those code images? Would be handy to have them as reference when coding up my own site (attempt of WP site). Don't appear to be able to grab just the zoomed-in image.

  8. Brussells says:

    Another awesome article and follows on from the great PSD to XHTML tut.

    Is there a way to be able to print out the images please? Being able to read the code offline (with the useful notes you've added), whilst working on my own site (test of building with WP) would be very advantageous.

    WP knowledge is definitely a must-have skill, I think, for designers and this tutorial helps LOADS!

  9. YoYurec says:

    Awesome! Bookmarked.

  10. Abban says:

    Great article Chris, there's a definite lack of guides for WP beginners out there. One thing worth noting though, to save time if you're building your template from scratch or straight from a psd mockup, I find its best to just put everything into the index.php. Once you're happy with the front page you can then chop out the header, sidebar and footer into their includes and then duplicate the index.php file as your category.php, archive.php, page.php, single.php etc.

  11. Edmeral says:

    That's what I want! I will read it this night !
    Thanks:)

  12. pecciola says:

    Very great and useful article! Which plugin you use to zoom images and wich program you use to write on images?

  13. Maverick says:

    loads and loads of blogs and posts relating this topic yet this article is quite useful and informative.

    thanks for the post.

  14. Brian Jones says:

    Another great post and tutorial – thanks Chris!

  15. chris says:

    I've been following this project and love it!! Thanks for the great tutorial Chris. Definitely one of the best ones I've read and easy to follow. Will this process work on a premium theme such as Headway? I love what they have built and want to use my new theme with it. Are there any specific problems that would arise with a premium theme?

  16. Neale says:

    Your right Skeletor does rule :D

  17. Dodie says:

    Wow this is awesome.

    My friend was just thinking of starting WordPress theme development, and since I am not that good of a teacher, I just sent him this link and teach him based on this. Great tutorial! :-bd

  18. Rachel says:

    Brilliant article yet again Chris. Seems quite easy, at least to build simple WP themes, when you set it down like this. Will definitely have to try this in my next static HTML/CSS site.

  19. JuliannTrott says:

    Your tuto is really great and simple, you should put it on video !

  20. Good article. You should also mention the screenshot.png for branding your theme in the admin area :)

  21. Lee says:

    Another awesome tutorial Chris. I have a project where I could use WordPress as the backend CMS and I'm definitely going to give it a go now.

    What are your thoughts on the beta version of WordPress 3.0?

  22. Lee says:

    Another awesome tutorial Chris. I have a project where I could use WordPress as the CMS and I'm definitely going to give it a go now.

    What are your thoughts on the beta version of WordPress 3.0?

  23. andre says:

    love with this site, because tlah help me a lot from the past I find this tutorial, thanks

  24. katrina says:

    thanks, you have a lot of help, I will always follow this site, now I save in bookmarks

  25. Bryan says:

    Oh man Chris! i am totally in love with this theme im definitly gonna try it out.
    Great work!

  26. Jae Xavier says:

    Nice tutorial here and well presented. How much of this will cross over to WordPress 3.0?

  27. Been looking for something like this for a while, as a new client has wanted their website in WordPress, which i said I would do, but don't know how yet! So thanks for this :D

  28. Bluebox says:

    Hi Chris, well this is nice for start with WP, but I can not stand not to mention your Sticky theme from your blog.
    Do not be offended, but it look's like some beginers work. And I don't understand people who so feverishly commented that piece…
    But I love your oversized login form for members area ;)

  29. Jaddie says:

    Fantastic information. Thank you for sharing.

  30. Nice tut, very well written!

  31. pamela says:

    great tutorial, one I will keep bookmarked for reference. Thanks for sharing

  32. Great Reference for building your own wordpress template. Thanks for the input!

  33. Franco says:

    Awesome Tuts, The first thing I`ll do when I get the chance i folow this tut and build my first WordPress Theme. Thanks!!!

  34. gareth says:

    Brilliant! Nice one Chris! So simple, east to follow and i love the captioned code breakdowns.

  35. Awesome tut.
    I bookmarked this for future uses

  36. Andre Morgan says:

    Perfect

  37. Bookmarked! But you didn't provide all the codes for other pages as you did for first few ones (like header.php).

  38. Katie says:

    I am just about to code my first wordpress theme, so this came at a perfect time. Thanks!

  39. Nice tut, very well written!

  40. Marius says:

    Great tutorial! Easy to follow and well written! Thanks!

  41. Excellent read Chris, I've only started building wordpress themes for clients, and appreciate the quick tips. Any chance of a tutorial on adding you theme options to the admin view?

  42. Evelyn says:

    The example site is perfect! Will it be for members only or for free?
    If it's for free will definitely use it :)

  43. ASAD ULLAH says:

    i was searching this type of post. very thanks.

  44. AHWebArt says:

    Thanks Chris. Very informative because i am also from one of WordPress lovers.

    Nice Tutorial

  45. thesi says:

    wow awsome article.

  46. Stephan says:

    WOW! This Tutorial is awesome, that's what i've searched for! Thanks!

Comments are now closed