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: CCLab: PHP Blog Start

  2. Pingback: Styling JomSocial – A Blank Canvas Template | fog of eternity | we make great websites

  3. Pingback: WordPress 300+ Collection of Amazing Resources | Amazing and Inspiring Design

  4. Pingback: The Headless Weblog of Sleepy Hollow « Desktop Icon

  5. Pingback: Recursos para wordpress: (4) Recursos para a criação de temas | the worst kind of thief

  6. Pingback: This is ridiculous. | MikeandMalinda.com

  7. Pingback: 300+ Resources to Help You Become a WordPress Expert « eBSPAD

  8. Pingback: Anonymous

  9. Pingback: Wordpress theme design | Link7 Blog

  10. Pingback: Skapa ert eget WordPress tema - 8 guider & manualer | ZtrixQ.se

  11. Pingback: Save web pages as pdf

  12. Pingback: Prof. Felippe » Blog Archive » Criação de Templates para Wordpress

  13. Pingback: WPConcept » Best wordpress themes tutorials

  14. Pingback: 9 Useful Websites for Thematic Child Theme Development

  15. Pingback: 300+ Resources to Help You Become a WordPress Expert | LeVoltz - iPhone Games, Engineering Projects, Wordpress Themes

  16. Just fired up MySQL on a OS X server; installed PHPMyAdmin; fired it up and got a test db running and then installed WordPress… …the next step is, of course, a custom theme. Problem is/was, I don’t actually know how to make one. But with your tutorial in hand, I now do. (Well, might learn…)

    In short, this is just a drawn out ‘Thank You”.

    T

  17. Pingback: Site updated [ Mumbai Confidential ]

  18. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  19. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  20. Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial « My Graphic Friend's blog

  21. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  22. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  23. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  24. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  25. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  26. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  27. Pingback: How To Create A Wordpress Theme… |

  28. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  29. I have around 200 domains about gambling and i want to make some good wordpress themes with 3 columns, doesn’t seem to be so hard but require to much time, if you have time please send me an email and let me know a price for some good themes. In mean time i will try to make some templates by myself, i edited lots of template but none of them maked from scratch.

    Thank’s for sharing with us.

  30. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  31. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  32. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  33. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign - wpparty.com

  34. Pingback: 300多种可帮你成为WordPress专家的资源 | 上海网站建设,上海网络公司

  35. Pingback: Créer un thème wordpress

  36. Pingback: Clemens Bartz : Blog :: Wordpress als CMS? Lieber nicht…

  37. Pingback: wordpress » XMM.IR

  38. Pingback: That Norwegian Guy » Wordpress themes using HTML5

  39. Pingback: How to Make a Wordpress Theme

  40. Pingback: My 2010 Resolutions

  41. Pingback: Kyle Cheung - links for 2010-02-03

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