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

Posted on June 22, 2009 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.

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

Ally McC on June 22, 2009 at 6:49 am said:

I’m really excited about getting started, thanks Ian
Maggy on June 22, 2009 at 7:13 am said:

Looking forward to it! Thanks in advance.
Cheers,
Maggy
Adam W. Warner on June 22, 2009 at 8:05 am said:

Looks like a promising series Ian. Speaking of series, may I suggest that you consider using the Series plugin by Justin Tadlock. This would be a nice way for people to keep track of this in the future:)
http://justintadlock.com/archives/2009/06/09/series-wordpress-plugin

You can see how I’m using it with my “Using Video with WordPress” series in the url above.

Looking forward to sending people to your series here:)
- Ian Stewart on June 22, 2009 at 12:15 pm said:
  
  For keeping track of the series I recommend just bookmarking this post. The table of contents will link out to each post in the series. And once the series is finished there’ll be a hyperlinked table of contents in each individual post.
  - Adam W. Warner on June 22, 2009 at 12:39 pm said:
    
    Duly noted. Thanks for the reply Ian:)
Chris Dornan on June 22, 2009 at 8:39 am said:

I am so curious. Thanks for even trying to do something like this.
eiffair on June 22, 2009 at 10:25 am said:

Still with default theme waiting for a great tutorial to make my own one.
I think this moment is coming. Thanks for it.
Michael on June 22, 2009 at 11:48 am said:

Any suggested ‘pre-requisite’ reading to cram in before we start? I’m pretty conversant with CSS and HTML, but the rest of it – PHP, WP loop, etc – is pretty much a complete mystery to me at the moment.
- Ian Stewart on June 22, 2009 at 12:03 pm said:
  
  For PHP I recommend PHP 101: PHP for the Absolute Beginner (which will be mentioned in tomorrow’s post). The WordPress Loop is explained (pretty well, I think) when we get to the post on the Index Template.
- Sarah... on June 23, 2009 at 12:39 pm said:
  
  @Michael, There’s also a DVD I used to get me started with this programming stuff. It’s this one on Amazon if you care
  http://www.amazon.com/gp/product/B001EDRPOG/
  I thought it was good as far as teaching the technical aspects, although the aesthetic quality of the images they used was way below my expectations as a designer. But the technical stuff was definitely a super quick way to learn.
  Looking forward to your tutorial too Ian I love challenging programming tutorials, they get me excited
Pingback: How To Create a WordPress Theme - PSD to HTML - PSD to Wordpress - PSD Conversion
Mark McWilliams on June 22, 2009 at 6:34 pm said:

This is one WordPress Theme series that I’m looking forward to reading, implementing, and learning from! It’ll be great to finally have a theme that in theory I can call my OWN, and release it for others to use!

Being only an 18 year old kid, I have played with WordPress for a couple of years now, and would love to give something back into the community. So this is an ideal opportunity for doing just that, I only hope some of my creative buds come out in force throughout these tutorials!

Thanks
Mark
Pingback: Daily Digest for June 22nd | Digital Gilbert
Charles Stricklin on June 23, 2009 at 12:31 am said:

I’m curious to know if you’ll be starting out in Photoshop, and also if you’ll be using grids at all?
- Ian Stewart on June 23, 2009 at 6:43 am said:
  
  No Photoshop and no grids. But that’s not to say that you can’t incorporate a grid when we get to looking at the CSS. It’s always good to design from rational principles.
  - mike on December 6, 2009 at 4:02 pm said:
    
    blockquote cite=”"> It’s always good to design from rational principles.
    
    What is your position on grid based layout systems like 960.css?
Pingback: How To Create a WordPress Theme | Free Wordpress Themes - CityScape
Jamie on June 23, 2009 at 9:15 am said:

I am looking forward to learning how to build my own theme. I like the magazine style themes the best. Hopefully with this tutorial, instead of using somebody else’s theme, I can build my own.

Thanks, I am looking forward to learning!
Jamie Croft
Pingback: How To Create a WordPress Theme « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit
Rebecca Geiger on June 23, 2009 at 11:56 am said:

I am sooooooooooo excited! I have always wanted to create with word press… and now!!! I can Wahoo! thank you for developing this!
Johno on June 23, 2009 at 12:06 pm said:

Unsurprisingly, brilliant.
I’ve picked up so many bad habits along the way. This is going to help me unlearn them. Can’t wait to get started.
- David Airey on July 7, 2009 at 10:36 am said:
  
  Me too, John. I’m going to stop back here once my book’s done and redesign Logo Design Love.
  
  Ian, thanks very much for putting this one together. I enjoyed working my way through the old wpdesigner tutorials, and I’m sure this will be the same.
Pingback: How To Create a WordPress Theme | New WP Themes - WordPress News
rif on June 23, 2009 at 5:30 pm said:

Wonderful information
I will try to build my own theme
thanks!
Chris on June 23, 2009 at 5:42 pm said:

Sometimes things seem too perfect. It just so happens that yesterday on a whim I bought a wordpress hosting pack from godaddy, and my ultimate goal was to make a wordpress theme.

So I can’t wait to get started, and thanks for the post!
Jarvis on June 23, 2009 at 6:40 pm said:

Hi Ian,

This is a great idea, and I’m definately in for this one. Really been trying to grasp wordpress as a noob. and my current website shows that…. LOL

Hopefully I can learn a good bit or two and at an ideal pace
Eric on June 23, 2009 at 8:51 pm said:

This is great. Thanks Ian. How hard will it be to add more widget areas? I really like all the widget areas in Thematic.
- Ian Stewart on June 23, 2009 at 8:56 pm said:
  
  Once you see how easy it is to add widget areas it won’t be hard at all.
Pingback: Resumen del día June 23rd | Widcket
Pingback: links for 2009-06-23 « Mandarine
Pingback: Enlaces en mi del.icio.us, junio 2009 | Vectoralia
Pingback: WordPress Roundup: 25 June 2009 | WooCamp
Pingback: Chris Dornan
Pingback: Journaling Blog Articles
Pingback: 如何创建 WordPress 主题 | 精品博客
Pingback: Couteau Suisse N°38 la série des trouvailles
Pingback: What I am currently absorbing | Hearsay | Jhames
Pingback: links for 2009-06-27 | Boost Ventilator
Pingback: Bloglayout selbst gemacht
Oliver on June 28, 2009 at 2:46 pm said:

There are so many tutorials out in the wild that try to teach you wordpress theme development but your tut is by far outstanding.You have a clean crystal clear “training style” and i begin to understand. Thank you and keep up the good work!

Kind regards,
Oliver
Kyan Blue on June 29, 2009 at 4:43 am said:

If I were being poetic, I’d say this is my long-awaited oasis in a parched desert of dessicated WordPress tutorials. ;D

I’ve found many walkthroughs on building a WordPress theme from scratch, but most of them were written years ago—before threaded comments and child themes. And I need a little help right now with my personal site…

I admire the work you’ve done on Thematic, so I’m extremely glad I found this. Thanks!
Evan Mullins on June 29, 2009 at 4:01 pm said:

Great Idea and Great start! I’m really excited for the rest of it. I like the way you’re approaching it, rather than just a huge post about all of it, you’ve divided it into lessons basically. Thanks Ian!
Pingback: Wordpress Design and Theme Tutorials - Hidden Pixels
Pingback: Learn How To Create A WordPress Theme | Blog Templates Reviews
Pingback: How To Create a WordPress Theme « wp-popular.com
Ed Ramos on July 1, 2009 at 10:26 pm said:

GREAT series. I am learning in hopes of customizing my blog at http://www.thinkpinkpixels.com.
Haroun Kola on July 2, 2009 at 2:11 am said:

I’ve been looking for a tutorial on how to create themes for wordpress. Thanks for this
Jim Bertucci on July 3, 2009 at 10:52 am said:

Ian, this has just been so great. For me the actual CSS will be the icing on the cake. From all my experiences, I know you can not style every little thing but I am hoping the CSS will cover at least the major styling. For the short time I have know Ian Stewart, I sure he has a cool CSS already locked up somewhere.

Have a great weekend.

JIM
Pingback: WordPress Weekend Resources - July 3, 2009 | Theme Lab
Jim Bertucci on July 3, 2009 at 2:36 pm said:

Ian,
In studying the functions file, the way you populated the widget areas with the arrays. Is this something new as I have never seen it but I love it. So much neater and easier then long coding the sidebar.php page.
- Jim Bertucci on July 3, 2009 at 2:43 pm said:
  
  Can we add to the presets. i tried ‘calendar’ refreshed but it would not show up.
  
  Thanks
  
  JIM
  - Ian Stewart on July 3, 2009 at 2:52 pm said:
    
    You’re getting ahead of everybody! It depends on the precise name, Jim. I’d have to roll through the code.
Jim Bertucci on July 3, 2009 at 4:29 pm said:

Sorry, that just caught my eye- oops! I am very patient but sometimes so enthused.
Pingback: Arbenting’s Weekly Inspiration and Best of the Web #11 | Arbenting
Pingback: Cosas interesantes para ver y leer (8) | vloox
Mikus on July 3, 2009 at 10:06 pm said:

Why do you use the word “Create” instead of “Make” ??

I see that wpdesigner and other use the same word.. is it some kind of SEO optimization?
- Ian Stewart on July 3, 2009 at 10:45 pm said:
  
  Because that’s the sort of term I imagine people would be searching with and—more importantly—because I think it sounds better.
ahmad on July 4, 2009 at 5:39 pm said:

thank’s
Rebecca geiger on July 4, 2009 at 6:23 pm said:

Hi there!
I decided to tackle this (OY) and I am stuck.I really want to learn this and would very much appreciate your advice.
In step 4 on : http://tinyurl.com/6zacb6 It says ” Visit your local site (localhost:port or localhost:port/wordpress), and enter the following information into the database setup form: ” and enter the following information into the database setup form…
database name: wordpress
database host/server: localhost
database user: root
database password: root

I am not sure where/how you visit your local host (is that from the MAMP on your computer?) or is it in the phpMyadmin when you start up the MAMP to enter the information into the database setup form.. Where would this be found if it is on the setup phpmyadmin?
Sorry I am a total supernoob..
Rebecca
thorsten on July 5, 2009 at 4:15 am said:

These links are broken: 11 # The Sidebar Template and 12 # Reset-Rebuild Theme CSS & Define Your Layouts.

I get the message: site not found. Can you tell me the right link?
- Ian Stewart on July 5, 2009 at 7:42 am said:
  
  They’ll both be working Monday and Tuesday. Don’t fret.
David Bixler on July 7, 2009 at 12:01 pm said:

Hello, I own/operate/blog on http://www.bixit.net and pending a good review, I’ll re-blog this for you. I can’t promise a thousand hits, but a few dozen might be possible.
Pingback: Reset & Rebuild CSS | listen to...
hehe on July 8, 2009 at 4:13 am said:

Thanks. Gonna start next week.
Pingback: Wordpress theme készítés | Yloz féle zacc
Lazarus on July 8, 2009 at 11:17 am said:

Wow! you da man!

thanks so much from this fledgling WP enthusiast!!
Pingback: Create Your Own WordPress Theme Tutorial
Kumail.H.T on July 8, 2009 at 1:20 pm said:

This is definitely going to be the ultimate tutorial I have ever come across! Cant Wait
eiffair on July 8, 2009 at 5:43 pm said:

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.
Pingback: Blog… » links for 2009-07-08
Pingback: links for 2009-07-08 | Digital Rehab
Raymond Selda on July 9, 2009 at 12:36 am said:

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.
clivestewart on July 9, 2009 at 7:30 am said:

This tuts are step by step just the way we like it!
great work!
Pingback: Best of the Week 7/10 - Creattica Daily
Lucas Tadeu on July 10, 2009 at 9:02 am said:

Just what I was looking for, thanks (:
Grégoire Noyelle on July 11, 2009 at 12:20 pm said:

Great great. Thanks so much Ian !
Pingback: Small Potato, How To Create a WordPress Theme, and New Redesign
Pingback: tj mapes » Blog Archive » What I’m Reading (weekly)
Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | Design Newz
Design55 on July 12, 2009 at 12:36 pm said:

Nice post. Thanks!
Pingback: My Favorite Design Links of the (Rest of the) Week | eGrace Creative
Pingback: Créer un thème WordPress Traduction en français themeshaper | Eiffair
Pingback: Créer un thème WordPress - Introduction | Eiffair
Pingback: Créer un thème WordPress : Outils de développement | Eiffair
Pingback: New Broom – a theme by Geoff Matheson
Pingback: Créer un Thème Wordpress : 3. Structure HTML du Thème | Eiffair
Pingback: WordPress Tips & Länkar v29-09 | wpxl
Pingback: XAMPP中Apache不能运行的解决方法。 | 路人吧
Berlin-KulturClub on July 14, 2009 at 5:24 am said:

Thank You sooo much!!!

That´s what i was looking for for a very long time!!!!
finally i found it! Thanx again!
Pingback: Créer un Thème WordPress : 4. Structure des Dossiers et des Templates | Eiffair
Pingback: 8 Tutorials about How to create a WordPress theme « WPCrowd
Pingback: Learn How to Creat wordpress theme from A to Z. | guidesigner.net
Pingback: 12 great tutorials on creating a new Wordpress Theme | [Re]Encoded.com
Pingback: Créer un Thème WordPress : 5. Le Template Header | Eiffair
Pingback: Créer un Thème WordPress : 6. Le Template Index | Eiffair
Pingback: Créer un Thème WordPress : 7. Les Templates Single Post, Attachment et 404 | Eiffair
Pingback: Créer un thème WordPress : 8. Le Template Comments | Eiffair
Pingback: 8 Tutorials about How to create a WordPress theme : FARIFUNCOM
Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | WpMash - WordPress News
Pingback: In choosing a CMS: 40+ Great CMS Theming Tutorials | Noupe
Pingback: Créer un Thème WordPress : 9. Les Templates Search et Page | Eiffair
Pingback: In choosing a CMS: 40+ Great CMS Theming Tutorials - Programming Blog
Pingback: Amalgamis.com
Pingback: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | wpden
Bryan Jones on July 27, 2009 at 12:14 pm said:

I have a strange thing happening. I can’t get the sidebars to show up at all. I’ve copied and recopied the exact files from the google code area, but still no avail. The sidebars just won’t show up. Any ideas? I’ve got them on a test area here: http://www.bcjonesonline.com/test1

Thanks.
- Ian Stewart on July 27, 2009 at 1:30 pm said:
  
  I’d try resetting your widgets by uncommenting the 1 line in the tutorial code (it’s noted there).
Pingback: WordPress Blog from Your Design Tutorials! | witola.com
Pingback: Top 5 Content Management Systems « Lemuel Stevens – Freelance Web Designer & Developer
Pingback: My First Theme
Pingback: Créer un Thème WordPress : 11. Le Template Sidebar | Eiffair
Pingback: Créer un Thème WordPress : 11. Le Template Sidebar | Eiffair
Pingback: Créer un thème WordPress : 10. Les Templates Archive, Author, Category et Tag | Eiffair
nitendra on August 1, 2009 at 9:13 am said:

Thanks for the excellent article. It had clear my doubt, i m using it from past 2 months but getting the good result.

ThemeShaper

Home of the Automattic Theme Team

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

WordPress Theme Tutorial Table of Contents

Like this:

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

WordPress Theme Tutorial Table of Contents

Share this:

Like this:

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