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.
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.
- WordPress Theme Tutorial Introduction
- Theme Development Tools
- Creating a Theme HTML Structure
- Template and Directory Structure
- The Header Template
- The Index Template
- The Single Post, Post Attachment, & 404 Templates
- The Comments Template
- The Search Template & The Page Template
- The Archive, Author, Category & Tags Template
- The Sidebar Template
- Reset-Rebuild Theme CSS & Define Your Layouts
ThemeShaper 
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.
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
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*. ❤
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.
nice trick..
I already love the ‘Shape’ Theme. I’m looking forward to learn from this tutorial so i’ll be able to make it my own.
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.
code didn’t make it through, I meant wp_footer();
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 🙂
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.
Just have to say great tutorial – just what I was looking for. Thanks!
Thank you for this cool tutorial 🙂
I like the way you show to us how create wordpress theme. Thanks for your kind heart.
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.