How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

Update: We’ve created a second edition of this popular tutorial! It contains updated code samples, coverage of the latest theme development techniques, and more. Check it out at The ThemeShaper WordPress Theme Tutorial: 2nd Edition.

In only 11 individual lessons this WordPress Theme Tutorial is going to show you how to build a powerful, up-to-date, WordPress Theme from scratch. As we go along I’ll explain what’s happening including (for better or worse) my thinking on certain techniques and why I’m choosing one path over another. Essentially, I’ll be teaching you everything you need to know about WordPress Theme development.

Skip to the Table of Contents.

tutorial-graphic-large

Here’s the list of features your finished theme will be able to boast of:

  • All the search-engine optimization you’ll really need
  • Including google-supported Microformat markup
  • Valid and logical semantic markup structure than can be used to create ANY layout
  • Smart default CSS layouts
  • Dynamic Body, post and comment classes
  • Separated trackbacks and threaded comments
  • 2 widget areas coded to disappear when they’re empty
  • And all the typical WordPress stuff you expect from a theme

I think that’s kind of impressive—for any WordPress Theme.

At the end of this tutorial, with code in hand, you’ll be able to do almost anything you want. You can even think of the finished Theme as your own personal website development framework for WordPress.

I’ve already used it to start another project of my own, The Shape Theme. Download it and check it out if you’d like to see some of the finished code we’ll be going through, live, in action. Alternately, you can browse through the up-to-date source code for the entire tutorial on Google Code.

WordPress Theme Tutorial Table of Contents

Ready for a WordPress Theme Tutorial that will show you how to create a powerful WordPress Theme from scratch? Read it from the beginning and code yourself up something awesome.

  1. WordPress Theme Tutorial Introduction
  2. Theme Development Tools
  3. Creating a Theme HTML Structure
  4. Template and Directory Structure
  5. The Header Template
  6. The Index Template
  7. The Single Post, Post Attachment, & 404 Templates
  8. The Comments Template
  9. The Search Template & The Page Template
  10. The Archive, Author, Category & Tags Template
  11. The Sidebar Template
  12. Reset-Rebuild Theme CSS & Define Your Layouts

318 thoughts on “How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial”

  1. I’m not a newbie, but I also wouldn’t consider myself advanced when it comes to html, mysql, and php. WordPress themes have always confused me when it should be straight forward. I’m looking forward to going through your tutorial and hopefully the light will go on at some point. I can never find just the right theme. If I can build a webpage the way I want it, I should be able to do the same with WordPress.

  2. I’ve never really gotten my head around the wordpress platform, a few tweaks here and there and everything is all messed up, getting some great advice here, thanks.

  3. This installation worked fine for me and I was able to get into my WordPress local install using Safari without a problem. However I am having trouble using Firefox. I’m able to view the administrator’s page in Firefox but when I select “view site” I get the following error message:

    The page isn’t redirecting properly
    Firefox has detected that the server is redirecting the request for this address in a way that will never complete.
    • This problem can sometimes be caused by disabled or refusing to accept cookies.

    I do have cookies enabled. I did not have them enabled when I set up the local host via MAMP though. And I used Safari to set it up. However I do wish to use Firefox as per your suggestion but I’m baffled as to why I cannot “visit site”.

    Any ideas or suggestions?

    1. Just in case anyone is interested or has the same experience, I solved my problem. First I trashed all of the MAMP and WordPress files that I had previously downloaded. Then I re-downloaded them again and re-installed everything. But I don’t think this was ever an issue since the local WP site ran and displayed fine with Safari. The one thing I did different this time was to select PHP Version 5.2.13 instead of 5.3.2 in the MAMP preferences. Those are the only two choices I have and the latest versions is selected by default. Maybe it is an unstable version or something but it seems that Firefox did not like it, at least on my computer. I’ll admit I am driving while blind when it comes to web or theme development but at least I have fixed my problem and now can use Firefox (although I loathe Firefox in general and much prefer Safari) so I will be able to take advantage of the addons that Ian suggests.

  4. This is really good information because WordPress is having very good demand and above all it is very easy to prepare and maintain website with WordPress.

  5. Pingback: Welcome!
  6. Pingback: Deserved Credit
  7. Pingback: New Look
  8. Hello Ian,
    I just uploaded Thematic and had a peak at your site and was pleasantly surprised by the wealth of information, tutorials. Thank you so much for your time and sharing your knowledge.
    Phill 🙂

  9. Great article and theme, thank you very much!
    There are little differences in the following files of shape theme and the google svn: sidebar, functions, index. Please check it and update the svn if it makes sense.

  10. hey, I intend to start reading through the 12 posts but I need to know one thing before I start, has there been any change in the way how themes are created for WordPress 3.0, if yes then have these tutorials been updated tor reflect those changes or not, if these are not updated, then can anyone tell me what things to look for……

    1. Zaid, this tutorial will get you close, but there will be some small tweaks. Start by going through this tutorial from start to finish. Ian’s tutorial is very thorough and if you understand everything here you’ll have a solid foundation to work through the updates on your own.

      Once you have completed that, you’ll be ready to make it WP 3.0 compatible. Between these two tutorials you’ll have everything you need.

      If you get stuck, WP forums & Google will get you through.

  11. Hi there…

    Very excited to read this. I bought Artisteer, which is quite nifty, but has its limitations. I would really like to be able to create a theme myself rather than using a generator or software, so am keen to have a go.

    Will let you know how I get on.

  12. Pingback: Hello world!
  13. I know how to setup WP from scratch and developed a fully functional website. However, for a couple of years of experience I never build my own WP theme. Hopefully, this could be a good start for me here. 🙂

  14. Great post here. I will actually save this to share with clients interested in creating their own themes.

Comments are closed.