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 not a newbie, but I also wouldn’t consider myself advanced when it comes to html, mysql, and php. WordPress themes have always confused me when it should be straight forward. I’m looking forward to going through your tutorial and hopefully the light will go on at some point. I can never find just the right theme. If I can build a webpage the way I want it, I should be able to do the same with WordPress.
[…] How To Create A WordPress Theme: This is an awesome 12 part tutorial that will teach you everything you need to know about creating a WordPress theme from scratch. This is the tutorial that I used when I was learning to write WordPress themes for the first time. […]
Ultimate guide, i almost successfully made the whole skin. Thanks a lot Bro.
That’s very nice indeed with all these informative tutorial. I will use this guidance. thanks
[…] How To Create a WordPress Theme: The… […]
Thanx a lot i was looking for it to develop a word press theme
[…] currently following this tutorial : https://themeshaper.com/wordpress-themes-templates-tutorial/ […]
I’ve never really gotten my head around the wordpress platform, a few tweaks here and there and everything is all messed up, getting some great advice here, thanks.
[…] ThemeShaper: Similar to Wp-designer but more in-depth as it has a dedicated part for HTML for those who need to brush up their HTML. […]
[…] How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial […]
This installation worked fine for me and I was able to get into my WordPress local install using Safari without a problem. However I am having trouble using Firefox. I’m able to view the administrator’s page in Firefox but when I select “view site” I get the following error message:
The page isn’t redirecting properly
Firefox has detected that the server is redirecting the request for this address in a way that will never complete.
• This problem can sometimes be caused by disabled or refusing to accept cookies.
I do have cookies enabled. I did not have them enabled when I set up the local host via MAMP though. And I used Safari to set it up. However I do wish to use Firefox as per your suggestion but I’m baffled as to why I cannot “visit site”.
Any ideas or suggestions?
Just in case anyone is interested or has the same experience, I solved my problem. First I trashed all of the MAMP and WordPress files that I had previously downloaded. Then I re-downloaded them again and re-installed everything. But I don’t think this was ever an issue since the local WP site ran and displayed fine with Safari. The one thing I did different this time was to select PHP Version 5.2.13 instead of 5.3.2 in the MAMP preferences. Those are the only two choices I have and the latest versions is selected by default. Maybe it is an unstable version or something but it seems that Firefox did not like it, at least on my computer. I’ll admit I am driving while blind when it comes to web or theme development but at least I have fixed my problem and now can use Firefox (although I loathe Firefox in general and much prefer Safari) so I will be able to take advantage of the addons that Ian suggests.
[…] How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (ThemeShaper) […]
[…] https://themeshaper.com/wordpress-themes-templates-tutorial/ […]
All themes are great but I’m still not able to find one for me 😦
It seems that number of creative web designers have increased a lot now.Markus,Atilla,Curt,James, Costa
This is really good information because WordPress is having very good demand and above all it is very easy to prepare and maintain website with WordPress.
[…] guys at ThemShaper thought so too, and they have published what, in my humble opinion, is probably the single best tutorial on building a WordPress theme ever written. Their tutorial covers everything from how to set up a […]
[…] to WordPress for it’s ability to customize everything and to update from my iPhone. I used ThemeShaper’s Theme Tutorial to create my own […]
[…] flow to the documents in the Blog Design and Layout section. As for that 101-level theme tutorial? ThemeShaper has a great one, and here’s one from ThemeTation, although the latter one starts with photoshop and ends with […]
[…] time. Interested in trying your hand at it? You can find the tutorial I’ve been looking at here. Tags: learning, […]
[…] I based my design on. I also have to give a big hand to ThemeShaper/Ian Stewart for creating the tutorial that enabled me to style my WordPress blog the way I wanted to. This entry was posted in […]
[…] 25 – A walkthrough for intermediate web designers and developers on how to create a WP theme.Theme Shaper – Create a powerful, up-to-date WordPress theme in 11 individual lessons.WP Designer -a […]
[…] with some CSS, PHP, and this excellent guide in hand I set to work. The hard part was picking a color scheme. I know I wanted a dark theme […]
[…] https://themeshaper.com/wordpress-themes-templates-tutorial/ This entry was posted in Uncategorized. Bookmark the permalink. […]
[…] https://themeshaper.com/wordpress-themes-templates-tutorial/ […]
[…] ran through this tutorial which makes it a lot easier to understand the underlying structure of WP: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial Now I might go looking at the available themes and see what's available. Does anyone know if the […]
[…] WordPress theming from scratch, rather than starting with a WordPress theme framework. Shape, this tutorial by Ian, and a few other resources helped me learn a […]
First article sounds impressive. Hope to get that promising and useful stuff inside.
I about to get started right now. Wish me luck lol 🙂
[…] first principles. After reading some of the documentation at wordpress.org and a nice tutorial at themeshaper.com, I knew my level of incompetence with WordPress theme development. I knew I could make that […]
Hello Ian,
I just uploaded Thematic and had a peak at your site and was pleasantly surprised by the wealth of information, tutorials. Thank you so much for your time and sharing your knowledge.
Phill 🙂
Great article and theme, thank you very much!
There are little differences in the following files of shape theme and the google svn: sidebar, functions, index. Please check it and update the svn if it makes sense.
There are updates to the tutorial in store for the future.
hey, I intend to start reading through the 12 posts but I need to know one thing before I start, has there been any change in the way how themes are created for WordPress 3.0, if yes then have these tutorials been updated tor reflect those changes or not, if these are not updated, then can anyone tell me what things to look for……
Zaid, this tutorial will get you close, but there will be some small tweaks. Start by going through this tutorial from start to finish. Ian’s tutorial is very thorough and if you understand everything here you’ll have a solid foundation to work through the updates on your own.
Once you have completed that, you’ll be ready to make it WP 3.0 compatible. Between these two tutorials you’ll have everything you need.
If you get stuck, WP forums & Google will get you through.
Thank Lanwood, I am already half way thorough this tutorial….
it’s great….
[…] https://themeshaper.com/wordpress-themes-templates-tutorial/ http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/ http://codex.wordpress.org/Theme_DevelopmenReferences : […]
[…] a work-in-progress too. I basically took the barebones theme called Shapes, and went through this tutorial. I’ve been creating a foundation so I can create themes really quickly. I’ve […]
[…] undertake that project. The two tutorials I am using to learn about building a WordPress theme are Themeshaper.com, which is a 12 step process, and WPDesigner.com, which is a 16 step process. Share Web […]
[…] days scouting around the web looking at various theme development tutorials. The best I found was How to Create a WordPress Theme by Ian Stewart. I found it very well written and easy to follow so I would definitely recommend it […]
Hi there…
Very excited to read this. I bought Artisteer, which is quite nifty, but has its limitations. I would really like to be able to create a theme myself rather than using a generator or software, so am keen to have a go.
Will let you know how I get on.
[…] How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial […]
[…] modify an existing theme, but much shouting, swearing and pain occured. But thanks to the fantastic tutorial at Theme Shaper I created this from scratch and now I finally feel like I understand all the […]
[…] modify an existing theme, but much shouting, swearing and pain occured. But thanks to the fantastic tutorial at Theme Shaper I created this from scratch and now I finally feel like I understand all the […]
[…] WordPress development tutorials which all of them will teach you how to code a WordPress theme. 1.The Ultimate WordPress Theme Tutorial In this tutorial there are 11 very detailed steps to create your first WordPress theme.All steps […]
[…] Themeshaper was an invaluable resource for me, and it’s recommended reading. I’m going to do my best not to duplicate his efforts. […]
I know how to setup WP from scratch and developed a fully functional website. However, for a couple of years of experience I never build my own WP theme. Hopefully, this could be a good start for me here. 🙂
[…] on June 22, 2009 by Ian Stewart In only 11 individual lessons this WordPress Theme Tutorial is going to show […]
Good information to start designing a theme for WordPress.
Thanks for finally writing about >How To Create a WordPress
Theme: The Ultimate WordPress Theme Tutorial | ThemeShaper <Loved it!
Great post here. I will actually save this to share with clients interested in creating their own themes.
I have a question, can you do this same tutorial using Ampps?