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. Pingback: Editing Methods: To Geek or Not To Geek | How To Edit Wordpress

  3. Pingback: The Transformer Toys Shop » The Transformers Theme

  4. Pingback: creating a WordPress theme « I is Not's Official Blog

  5. 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.

  6. Pingback: Chike Chiejine » Blog Archive » Getting started with Wordpress?

  7. Pingback: Wordpress Video Tutorial: Why You Need a Wordpress Tutorial | dankerizer.net

  8. Steve Cooley says:

    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?

    • 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.

  9. Pingback: Best Resources for Learning WordPress Development | Design Shack

  10. Pingback: Create Wordpress Theme – I

  11. 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.

  12. Pingback: How to build your own WordPress theme | Jerry D. Russell dot Com

  13. Pingback: Welcome!

  14. Pingback: Post-presentation follow-up: Thoughtful Themeing resources | One Fine Jay

  15. Pingback: confidence builder - simplybecky's blog

  16. Pingback: Deserved Credit

  17. Pingback: Awesome Tutorials On How To Create a Wordpress Theme From Scratch | Theme Today

  18. Pingback: New Look

  19. Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | Crafty Geek Girl

  20. Pingback: Wordpress theme development and the white screen of death « A lovely blog from Big Things and Little Things Web Design

  21. Pingback: CMS Suggestions? - MacTalk Forums

  22. Pingback: David A. Kennedy | Welcome to a Brand New Site

  23. Pingback: Eric Berna » Web Site Digression

  24. phill says:

    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 :)

  25. andrasb says:

    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.

  26. 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……

    • Lenwood says:

      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.

  27. Pingback: how to you make a custom wordpress theme in dreamweaver? | Pixel Bunyip

  28. Pingback: Heirloom | Aaron Druck Thesis

  29. Pingback: » Winterracks Part 2 – Creating a Wordpress Theme

  30. Pingback: Research & development | Steve's Wordpress Challenge

  31. 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.

  32. Pingback: WordPress Theme Tutorial Collection | WordPress Hey - WordPress News, WordPress Themes, WordPress Plugins

  33. Pingback: Hello world!

  34. Pingback: Hello world! | Daniel List

  35. Pingback: 19 Detailed Wordpress Theme Development Tutorials To Help you Create Your Own Theme | DesignBeep

  36. Pingback: Building your own WordPress Theme – Evil Genius Labs

  37. 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. :-)

  38. Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | IWDSA

  39. designandpromote says:

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

Comments are closed.