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. Dan Galanffy says:

    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 wordpress.org. In fact, there are no sidebars when previewing the theme at wordpress.org. 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. Pingback: WordPress主题教程 | CMS网

  3. Pingback: The Ultimate WordPress Toolkit | DESNDEV || Learn. Share. Develop.

  4. Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign | Blam Yo!

  5. Pingback: Quiet day – Serialpurrs

  6. Joni says:

    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.

  7. Pingback: Prescient Media - A Little Wordpress Love

  8. Pingback: Wordpress Theme News – Woothemes and iThemes go GPL!  | DivageekDesigns.com

  9. Pingback: iCAD BOLG « iCAD BOLG

  10. Pingback: 40+ Awesome Tutorials and Techniques For WordPress Theme Developers | tripwire magazine

  11. Pingback: Bookmarks for June 29th through August 10th | Luis Ramirez

  12. Pingback: Como criar um tema do WordPress | Aldeia Urbana

  13. Tyler says:

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

  14. Pingback: 40+ Awesome Tutorials and Techniques For WordPress Theme Developers | huibit05.com

  15. Pingback: OWN:G goes online… - clutterlovers

  16. 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!

  17. Pingback: How To Make A WordPress Theme | A WordPress How To Blog || DesnDev

  18. Pingback: Englightened Online Marketing » Blog Archive » wordpress theme frameworks, thematic

  19. Pingback: Najlepsze przewodniki o tworzeniu tematów dla WordPress (eng) | Karol Manikowski

  20. Pingback: Colección de recursos imprescindibles para WordPress | Trazos Web

  21. Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | weheart.de/sign | Inspirational Design Showcase

  22. Char says:

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

    Char

  23. Pingback: funkysoft » Мануал по созданию темы на WordPress

  24. Pingback: Skapa ditt eget WordPress-tema

  25. Pingback: axeny: Как да създадем собствен WordPress Темп.. - edno23.com

  26. Pingback: Een WordPress thema maken

  27. Pingback: 700+ WordPress Resources | madiZor

  28. Pingback: 10 Resources I Use When Creating a Website.

  29. Pingback: 10 Resources I Use When Creating Websites.

  30. Pingback: Ten Resources I Use When Building a Website.

  31. Pingback: 10 Resources I Use When I Build Any Website.

  32. Pingback: Blog – Velagapati - 300+ Resources to Help You Become a WordPress Expert

  33. James Wyness says:

    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?

  34. James Wyness says:

    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?

  35. Pingback: Darko Kuzmanović » Blog Archive » Proces dizajniranja bloga

  36. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework | Es Developed - Fresh Website and Graphic Design

  37. James Wyness says:

    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

    • Shannon says:

      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.

  38. Pingback: Create your own Wordpress Themes with 20+ Tutorials | oOrch Blog

  39. Pingback: Homework 4 and more « I heart cclab

  40. Pingback: Learn How to Create Wordpress Themes

  41. 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?

  42. Pingback: HW #4 « PGTE 5162 / Section H

  43. Pingback: HW#5 « PGTE 5162 / Section H

  44. Pingback: Blogging Tutorial Links: HTML, CSS, WordPress

  45. Pingback: The Ultimate Wordpress Developer Toolbox | tripwire magazine

Comments are closed.