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

Posted on by Ian Stewart

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

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

  1. Pingback: How to Create Your First WordPress Theme « generally inappropriate

  2. Pingback: Firefox vs IE differences? - Page 2 - Website Babble Webmaster Forums

  3. Pingback: Wordpress – Recursos para Webmasters | Tienda virtual online. Diseño de paginas web. Posicionamiento Seo y Sem

  4. Awesome tutorial, I am now going to start my first WordPress theme with your site open as I go along. I will no doubt add comments later with a peek at my work. If it turns out any good of course :)

    Thanks.

  5. Pingback: 65 Of The Best WordPress Tutorials « Junkiee.Net

  6. Pingback: Create Wordpress Themes Resources « .: Teuku Farhan Blog :.

  7. Pingback: وورد برس عربيا » Blog Archive » 25 درس لتصميم قوالب وورد برس احترافية

  8. Thank you for your generosity in sharing these detailed instructions and files. It was a great source of reference as I setup my 1st WordPress template.

    thank you,

    ~ gabriel

  9. Pingback: How To Create a WordPress Theme!?!?! « Designdefine's Blog

  10. Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | Astagram Studios- A Creative Studio- Official Blog

  11. Pingback: 11 Most Common Wordpress Posts | New 2 Wp

  12. Big big thanks!
    I just type “how to create a wordpress theme” and pam, falling into your site that i think, will be really useful for me!
    *Run to read your tutorials*. <3

  13. Pingback: Never Theme » How To Create a WordPress Theme

  14. Pingback: How To Create a WordPress Theme . . « Ajith Srikukan

  15. Pingback: WordPress Expert Resources, Wordpress Plugins, Wordpress Tutorials

  16. Pingback: 700+ WordPress Resources | Webdesign | madiZor

  17. Pingback: Mit eget wordpress tema

  18. Pingback: Arbenting’s Weekly Inspiration and Best of the Web #11 » Arbenting - The Act of Being Creative

  19. Thanks Ian for the tutorial. I’ve just started.
    One thing that would be helpful is for one to see how current this tutorial is. I went through another tutorial series that I thinks was about 4 years old. I now the basics of WP development remain, but it would be nice to know that there have been regular updates.

    For example I would say right your home page:
    • This tutorial was originally written on xx/xx/xxxx.
    • The most recent update was on xx/xx/xxxx.

    This would give me confidence that you are still actively monitoring things and updating things for the tutorial.

  20. Pingback: # Ebook Deal of the Day: Create a Web Site: The Missing Manual, Second Edition – Only $ 9. 99! Use the code DDCWS | BEST-GADGET-NOW.COM

  21. Pingback: The Science Of Great Landscape Photography. | Xbox 360 Store

  22. Pingback: Step by step for Building WordPress Theme « Er.Krushna Chandra Muni :: Professional Web Developer | Website Design Orissa | Website Design Bhubaneswar | Website Design India | Website Design New Zealand | Website Design Auckland

  25. Pingback: Great Wordpress custom theme tutorial « Sawmiller Design

  26. Pingback: 5 Free WordPress Theme Development Tutorial | Code Fear

  27. Pingback: 45+ Fresh Wordpress Tutorials, Techniques and Hacks - Speckyboy Design Magazine

  28. Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial- PadForge

  29. Pingback: From Textpattern to Wordpress

  30. Pingback: 45+ Fresh Wordpress Tutorials, Techniques and Hacks | The New Drop

  31. Pingback: 45+ Fresh Wordpress Tutorials, Techniques and Hacks | WebDesign Collection

  32. Pingback: Wordpress Theme Design in Photoshop - tony @ home & work

  33. Fantastic tutorial to build a clear structured default theme to base all future websites on!
    Thanks so much for putting it all together!

    One sidenote though, there is nothing about the footer template and a lot of plugins won’t work when is not called for.

    I also second Bob T's suggestion to show how current the instructions are.

  34. Hi,

    You can send your design and get that converted to WordPress, PSD TO WORDPRESS code your design to a WordPress Theme.

    The website is http://www.psdtowordpress.eu/

    They do cross-browser compatible valid WordPress Theme and they offer a Non Disclosure Agreement (NDA) for all customers.

    Hope it’s useful :-)

  35. I tried to design my own webpresss theme for my website last year but in the end gave up because it was just too hard. My photoshop skill and html coding have improved a great deal now so I will give it a go again after reading this insperational tutorial.

  37. Pingback: 45+ Fresh Wordpress Tutorials, Techniques and Hacks

  39. Pingback: New to Wordpress? 8 Awesome Tutorials just for you | Designer Wall | The Best of Css, Web Design, Tuts & Inspiration

  40. Pingback: Themeshaper rocks my WordPress world

  41. Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial « Dheerajir's Blog

  42. Pingback: 100+ Resources for WordPress Theme Developers | BloggingBlogging.com

  43. Pingback: 45+ Fresh Wordpress Tutorials « MoeMir

  44. Pingback: Back on Track

  45. Pingback: links for 2010-03-31 « Thoughts on Interactive Writing

  47. Thanks a lot!! I had moded themes before, but this is the first time i had to create a couple from scratch and w/o this guide it wouldve been an even dautiner task.

  48. Pingback: jameskyle.net - The Blog and Portfolio of James Kyle

  49. Pingback: WordPress 主题开发中文教程 « 学好

  50. Pingback: What's this!? A new bloggeh blog? | Johanna's Place { personal blog }

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

  52. Pingback: Editing Methods: To Geek or Not To Geek | How To Edit Wordpress

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

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

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

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

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

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

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

  63. Pingback: Create Wordpress Theme – I

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

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

  67. Pingback: Welcome!

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

  69. Pingback: confidence builder - simplybecky's blog

  70. Pingback: Deserved Credit

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

  72. Pingback: New Look

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

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

  75. Pingback: CMS Suggestions? - MacTalk Forums

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

  79. Pingback: Eric Berna » Web Site Digression

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

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

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

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

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

  84. Pingback: Heirloom | Aaron Druck Thesis

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

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

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

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

  89. Pingback: Hello world!

  90. Pingback: Hello world! | Daniel List

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

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