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. Pingback: Reset & Rebuild CSS | listen to...

  2. Pingback: Wordpress theme készítés | Yloz féle zacc

  3. Pingback: Create Your Own WordPress Theme Tutorial

  4. Fantastic serie !!!
    I’m a beginner in blogging with wordpress and started a serie of posts about how I’m learning it.
    Your tutorial is exactly what I was looking for and I think it could be very helpfull to have a translation of it in french.
    If you agree with it I could do it for my blog with, of course, link to your posts, blog and promotion of Thematic.
    Let me know if you’re intersted with this idea.
    Thanks.

  5. Pingback: Blog… » links for 2009-07-08

  6. Pingback: links for 2009-07-08 | Digital Rehab

  7. Hi Ian,

    This series is what I need to get Archetype out of the beta stage. I believe my theme is going to be better after reading this. Thank you so much for sharing your knowledge.

  8. Pingback: Best of the Week 7/10 - Creattica Daily

  9. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign

  10. Pingback: tj mapes » Blog Archive » What I’m Reading (weekly)

  11. Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | Design Newz

  12. Pingback: My Favorite Design Links of the (Rest of the) Week | eGrace Creative

  13. Pingback: Créer un thème WordPress Traduction en français themeshaper | Eiffair

  14. Pingback: Créer un thème WordPress - Introduction | Eiffair

  15. Pingback: Créer un thème WordPress : Outils de développement | Eiffair

  16. Pingback: New Broom – a theme by Geoff Matheson

  17. Pingback: Créer un Thème Wordpress : 3. Structure HTML du Thème | Eiffair

  18. Pingback: WordPress Tips & Länkar v29-09 | wpxl

  19. Pingback: XAMPP中Apache不能运行的解决方法。 | 路人吧

  20. Pingback: Créer un Thème WordPress : 4. Structure des Dossiers et des Templates | Eiffair

  21. Pingback: 8 Tutorials about How to create a WordPress theme « WPCrowd

  22. Pingback: Learn How to Creat wordpress theme from A to Z. | guidesigner.net

  23. Pingback: 12 great tutorials on creating a new Wordpress Theme | [Re]Encoded.com

  24. Pingback: Créer un Thème WordPress : 5. Le Template Header | Eiffair

  25. Pingback: Créer un Thème WordPress : 6. Le Template Index | Eiffair

  26. Pingback: Créer un Thème WordPress : 7. Les Templates Single Post, Attachment et 404 | Eiffair

  27. Pingback: Créer un thème WordPress : 8. Le Template Comments | Eiffair

  28. Pingback: 8 Tutorials about How to create a WordPress theme : FARIFUNCOM

  29. Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | WpMash - WordPress News

  30. Pingback: In choosing a CMS: 40+ Great CMS Theming Tutorials | Noupe

  31. Pingback: Créer un Thème WordPress : 9. Les Templates Search et Page | Eiffair

  32. Pingback: In choosing a CMS: 40+ Great CMS Theming Tutorials - Programming Blog

  33. Pingback: Amalgamis.com

  34. Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | wpden

  35. Pingback: WordPress Blog from Your Design Tutorials! | witola.com

  36. Pingback: Top 5 Content Management Systems « Lemuel Stevens – Freelance Web Designer & Developer

  37. Pingback: My First Theme

  38. Pingback: Créer un Thème WordPress : 11. Le Template Sidebar | Eiffair

  39. Pingback: Créer un Thème WordPress : 11. Le Template Sidebar | Eiffair

  40. Pingback: Créer un thème WordPress : 10. Les Templates Archive, Author, Category et Tag | Eiffair

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s