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.


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

Author: Ian Stewart

Canadian, designer, dad, and dork. I work at Automattic on .

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

  1. Thanks for this great tutorial and for the many hours you obviously have invested in it. I now have a much more thorough understanding of how the pieces of a wordpress theme fit together.

    I did notice the same thing that Bryan Jones referred to in his post on July 27. The sidebars do not appear when using the downloadable theme from In fact, there are no sidebars when previewing the theme at There appear to be some dicrepancies between the online copy of functions.php and the tutorial. Perhaps that is an earlier version online, or maybe we are missing something?

    Thanks again for all you are doing for us noobs!

  2. Thanks for such a great resource, Ian! If the comments before mine are only half true, this WordPress newbie will be a happy girl once she’s gone through all the lessons.

  3. CSS is tricky to make 2 columns into the same length, does the word press template automatic does it or how does that work?

  4. I just wanted to let you know I’ve followed this tutorial step by step, and it was just what I was looking for. A million times, thank you!

  5. Hi Ian,

    Thanks so much for the tutorials – I have been working on them and enjoying learning more about WordPress themes. I am, however, stuck with a little problem that I can’t find the solution to.

    I have been doing everything exactly as you say in the tutorials (as far as I know!) – but when I go to upload my new theme, I get this error message:

    “Warning: file(C:…wp-content/themes/char/style.css) [function.file]: failed to open stream: No such file or directory in C:…wp-includestheme.php on line 180

    Warning: implode() [function.implode]: Invalid arguments passed in C:…wp-includestheme.php on line 180”

    Have you any ideas how I might fix this? Thanks for any help you can provide, and for all the help you have provided already 🙂


  6. I’ve followed all the steps of your tutorial to the letter. I’m working on a local server.

    Now nothing appears in my browser when I search for my theme. I can fool it by calling another theme in my themes folder ‘your-theme’ but I can’t figure out how to access the one I’ve just done.

    Any suggestions?

  7. oh well, try again. There’s a stylesheet missing. I can work with CSS but am not expert enough to know which stylesheet is missing. So my question is, having spent a few hours putting together the your-theme files, what stylesheet do I need to get up and running?

  8. I’m looking for some advice. I’ve copied the tutorials to the letter but still have a broken site telling me the stylesheet is missing. I’m not expert enough to figure out what to do. The stylesheet seems to have everything and the styles folder as well. I think I’m missing something obvious. Any help would be much appreciated. Thanks

    1. Hi,
      Just rename the “styles.css” to “style.css” and you should be set. I had the same thing happen. It drove me crazy. Good luck.

  9. It dont shows me the widgets on the main page but in the Admin Panel->widgets there are present activated widgets. These widgets apears only if I do any modification on widgets page in admin panel. Can you help me?

Comments are closed.