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 
318 responses
I’m really excited about getting started, thanks Ian 🙂
Looking forward to it! Thanks in advance.
Cheers,
Maggy
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:)
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.
Duly noted. Thanks for the reply Ian:)
I am so curious. Thanks for even trying to do something like this.
Still with default theme waiting for a great tutorial to make my own one.
I think this moment is coming. Thanks for it.
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.
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.
@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
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 🙂
[…] The rest is here: How To Create a WordPress Theme […]
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
[…] How To Create a WordPress Theme […]
I’m curious to know if you’ll be starting out in Photoshop, and also if you’ll be using grids at all?
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.
blockquote cite=””> It’s always good to design from rational principles.
What is your position on grid based layout systems like 960.css?
[…] Original post: How To Create a WordPress Theme […]
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
[…] How To Create a WordPress Themethemeshaper.com […]
I am sooooooooooo excited! I have always wanted to create with word press… and now!!! I can Wahoo! thank you for developing this!
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.
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.
[…] original post here: How To Create a WordPress Theme Share and […]
Wonderful information
I will try to build my own theme
thanks!
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!
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 🙂
This is great. Thanks Ian. How hard will it be to add more widget areas? I really like all the widget areas in Thematic.
Once you see how easy it is to add widget areas it won’t be hard at all.
[…] How To Create a WordPress Theme — 4:08pm via […]
[…] How To Create a WordPress Theme Over the next 12 days this WordPress Themes 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. […]
[…] How To Create a WordPress Theme – Serie de 12 tutoriales que explica todos los detalles, paso a paso. […]
[…] How to create a WordPress Theme Ian Stewart has already published the first 2 posts in this series, which will help you to create a pretty nifty WordPress theme (by the sound of it anyway). So if you’re keen to learn about WordPress theming, I suggest following this series in the next couple of weeks. […]
[…] have been following Ian Stewart’s brilliant How To Create a WordPress Theme. I spotted what I presume to be a very minor mistake, which set me thinking. Sometimes it is worth […]
[…] have been following Ian Stewart’s brilliant How To Create a WordPress Theme. I spotted what I presume to be a very minor mistake, which set me thinking. Sometimes it is worth […]
[…] WordPress 主题，幸好 Ian 同学也在他的博客上教人如何创建 WordPress […]
[…] How To Create a WordPress Theme […]
[…] Stewart is a graphic artist that is presenting a 12-day/post course How To Create a WordPress Theme. I’m willing to overlook his grammar and syntax for what, so far, has been an incredible […]
[…] How To Create a WordPress Theme (tags: webdev design wordpress cms themes) […]
[…] also seinem Blog auch ein völlig individuelles Aussehen geben will, der sollte unbedingt das WordPress Theme Tutorial heranziehen. Dieser Eintrag wurde veröffentlicht in Artikel. Bookmarken: Permanent-Link. […]
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
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!
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!
[…] How To Create a WordPress Theme […]
[…] how to create a WordPress Theme from scratch presently will be the tutorials from Themeshaper.com, How To Create A WordPress Theme. Highly recommended for people who are […]
[…] See the article here: How To Create a WordPress Theme […]
GREAT series. I am learning in hopes of customizing my blog at http://www.thinkpinkpixels.com.
I’ve been looking for a tutorial on how to create themes for wordpress. Thanks for this 🙂
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
[…] How To Create a WordPress Theme – This series of posts by Ian Stewart over at ThemeShaper will take you through the process of making your very own WordPress theme from scratch, similar to a series of posts made by Small Potato over at WPDesigner over 2 years ago. This really is a must-read series if you’re interested in WordPress theme development. […]
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.
Can we add to the presets. i tried ‘calendar’ refreshed but it would not show up.
Thanks
JIM
You’re getting ahead of everybody! 🙂 It depends on the precise name, Jim. I’d have to roll through the code.
Sorry, that just caught my eye- oops! I am very patient but sometimes so enthused.
[…] How To Create a WordPress Theme – Over the next 12 days this WordPress Themes 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. […]
[…] How To Create a WordPress Theme: El creador de ThemeShaper enseña en una serie de 12 tutoriales cómo crear un theme para wordpress desde cero. […]
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?
Because that’s the sort of term I imagine people would be searching with and—more importantly—because I think it sounds better.
thank’s
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
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?
They’ll both be working Monday and Tuesday. Don’t fret. 🙂
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.