The ThemeShaper WordPress Theme Tutorial: 2nd Edition

Preface

Many of you have written or commented to tell us how much you liked Ian Stewart’s original tutorial, “How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial”. You’ll be happy to learn that that we’ve created a second edition of the tutorial! Just like last time, you can expect one new lesson each day. What’s changed in the second edition? Keep reading to find out!

What’s new in the Second Edition:

  • Updated code samples that draw from the Underscores (_s) starter theme. February 2012 marked the release of the Underscores (_s) starter theme, and since then, it has gathered plenty of momentum. The code samples and file structure for the theme we’re going to create in this tutorial will draw from _s as a source of modern code that reflects current best practices.
  • New Lessons. Developing Your Theme Sense is worth reading if you’re completely new to WordPress Theme Development. It’ll teach you what you need to know to sharpen your theme intuition. Setting Up Your Theme Functions guides you through creating an organized theme structure, and Secure your WordPress Theme tells you what you need to know to lock your theme down from potential security threats. Distributing Your WordPress Theme covers the steps you’ll need to take to prepare your theme for distribution, and what you need to know about licensing.
  • New Tools. We added new awesome tools to the Theme Development Tools lesson.

Introduction

In only 16 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.

At the end of this tutorial, you’ll be able to do almost anything you want.

The Theme Shaper WordPress Theme Tutorial: 2nd Edition

Skip to the Table of Contents.

Introducing the Underscores (_s) Starter Theme

If you haven’t heard of _s, in short, it’s a 100% GPL, community-driven starter theme that contains modern templates, starter CSS, and an organized file structure — everything you need to help you get your designs off the ground. You can also use _s as a starting point for your future theme projects. If you’d like to learn more about the thinking behind _s, please take a moment to read A 1000-Hour Head Start: Introducing the _s Theme. Come right back after you’ve read it. No, seriously, we’ll wait.

The simple theme we’re going to build in this tutorial, The Shape Theme (yes, it’s the  Shape Theme from the 1st Edition, updated for the 2nd Edition), is based on _s. Download it and check it out if you’d like to see the finished code we’ll be going through, live, in action. It’ll be a while before we get to the CSS lesson, but if you’d like to look ahead at the sample design we’ll eventually create for the Shape theme, you can grab it here.

A Word About Timeliness
Are you reading this on a date that makes October 2012 seem like a long time ago? Yes? Then there’s a good chance that some of the code samples in this tutorial are already outdated. That’s OK, because what’s more important is that you understand the broad concepts — the whys — that are presented in the lessons. You can always grab a copy of the latest _s source code from the GitHub repository.

Here’s the list of features your finished theme will be able to boast of:

  • A well-organized, modular file structure
  • All the search-engine optimization you’ll really need
  • Google-supported Microformat markup
  • Valid and logical semantic markup structure than can be used to create ANY layout
  • Smart default CSS layouts
  • Localization support: translation-ready mark-up and an RTL stylesheet
  • Dynamic body, post, and comment classes
  • Separated trackbacks and threaded comments
  • Two widget areas: the first one with default widgets, and the second coded to disappear when it’s empty
  • Support for the Aside Post Format (after the tutorial, you’ll easily be able to add support for more post formats)
  • A Custom Menu, Flexible Custom Header Image, and a Custom Background
  • Simple responsive styling, including a lightweight navigation menu for mobile devices
  • And all the typical WordPress stuff you expect from a theme

I think that’s kind of impressive—for any WordPress Theme.

WordPress Theme Tutorial Table of Contents

Ready for a WordPress Theme Tutorial that will show you how to create a powerful theme from scratch? Read it from the beginning and code yourself up something awesome. Note: if a lesson does not have an active link, it means that lesson hasn’t been published yet. :)

Check back every day for a new lesson.

  1. WordPress Theme Tutorial Introduction
  2. Developing Theme Sense
  3. Theme Development Tools
  4. Creating a Theme HTML Structure
  5. Template and Directory Structure
  6. Setting Up Your Theme Functions
  7. Secure Your WordPress Theme
  8. The Header Template
  9. The Index Template
  10. The Single Post, Post Attachment, & 404 Templates
  11. The Comments Template
  12. The Search Template & The Page Template
  13. The Archive Template
  14. The Sidebar Template & The Footer Template
  15. Reset-Rebuild Theme CSS & Define Your Layouts
  16. Custom Background & Custom Header
  17. Distributing Your WordPress Theme

77 thoughts on “The ThemeShaper WordPress Theme Tutorial: 2nd Edition

  1. Daniel says:

    This is so cool, I can’t wait to read all the tutorials, Quality teaching on WP is so lacking in the community. Thanks.

  2. Pingback: WordPress Backup Tool Review: BlogVault | Open Knowledge

  3. Pingback: The ThemeShaper WordPress Theme Tutorial: 2nd Edition

  4. Was just today discussing with a work colleague the ins and outs of _s, the TOC of what’s coming looks great, in depth and will be much appreciated, thanks.

  5. Pingback: The ThemeShaper WordPress Theme Tutorial: 2nd Edition | ThemeShaper | 12-inch pianist

  6. Pingback: Updated WordPress Theme Tutorial Underway | WP Wordpress Hosting

  7. Pingback: Learn How To Make WordPress Themes: All The Best Resources | WPExplorer

  8. Phil says:

    I’ve just found this page and am looking forward to getting started, this series of tutorials sounds great!

  9. Pingback: O Tutorial ThemeShaper de Temas para WordPress: Segunda Edição | Shipe

  10. Sir I have read the article WordPress 3.0 for Theme Development that was great flow for Beginner . But most of Theme with javascript and images become heavy to load the site as Page Speed Decrease, and without JS and Image we can’t make website much attractive. Second Thing is If we use CSS then we need look the issue of Browser Compatiblity. You current them also Create Light weight and load fastly. But Can you share how to test cross browesr testing of this theme. Most Theme work perfectly in Firefox and Chrome but other browser creates Problems SO what to do in that case?

    Thank You in Advanced,and Nice Sharing!

  11. Pingback: Link-Tipp: Ausführliches WordPress-Theme Tutorial bei Themeshaper | Elmastudio

  12. Pingback: Updated WordPress Theme Tutorial Underway | Bitport

  13. Pingback: Weblog Tools Collection: Updated WordPress Theme Tutorial Underway | Bitport

  14. Pingback: The ThemeShaper WordPress Theme Tutorial: 2nd Edition | Brent Logan

  15. Pingback: Updated WordPress Theme Tutorial Complete « Weblog Tools Collection

  16. Pingback: Updated WordPress Theme Tutorial Complete | Lunarium Design

  17. Pingback: Updated WordPress Theme Tutorial Complete | iwebspider design and consulting

  18. Pingback: The ThemeShaper WordPress Theme Tutorial: 2nd Edition « Sanjip Shah

  19. Pingback: Updated WordPress Theme Tutorial Complete | High Cross Digital

  20. Pingback: vetanda

  21. Pingback: The WordPress Theme Building Weekend « vetanda

  22. Pingback: Die besten meiner geteilten Links auf Twitter im November 2012 | pixelstrol.ch

  23. OK. Got through a few themes and I am very happy. However, I found one small, nit-picky bug. The shape.zip file that you offer as an example, contains a custom-header.php file that has the line “margin: 1.5em auto 0;” This line will cause your theme to have a blank space along the top of your header. You won’t even notice it unless you are trying to get your header image flush with the top. Just comment the line out or remove it.

    The Underscores starter theme doesn’t have this problem. I know it’s an old file, but I wanted to point it out because it took me a bit to figure out where I got it.

  24. Nice to see this updated with input from _s. When I was first looking at building my first custom theme, I started with your previous series, but ending up downloading _s and hacking away at it to get what I needed. If this was around a few months ago, I guess I may well have relied upon it heavily!

  25. Thanks for the awesome yet most conclusive tutorial that turn WordPress users into theme developer. Thumbs up for Automattician, you guys rock…

  26. Nice to have this tutorial from reliable source. I feel somehow comfortable about WordPress themes now.
    Does any one know similar tutorial(from WordPress teams) for plugin development?

  27. Thank you for this great tutorial.
    Please remove the link (or make bold) from current item in the list of lessons for easier to understand on which page you are at the moment.

  28. Excellent detailed tutorial, both part 1 and part 2… Appreciate your time and effort you put into writing this useful information for fellow wordpress designer/developers…

  29. Pingback: Weekly Reflection – Week 10 | The Blog of a Web Student

  30. Pingback: Creating My Own WordPress Theme: #1 | The Blog of a Web Student

  31. Pingback: ThemeShaper WordPress Theme Tutorial: 2nd Edition | simpledream

  32. David Bosch says:

    Thank you for this tut. I am trying to follow it through. half way. I downloaded final version also and installed on my local WAMP. I ran theme check and came with this. Not sure if its helpful but was wandering if this _s theme is still viable after 3.5 and secure.

    Theme Check Results:
    RECOMMENDED: No reference to the_post_thumbnail() was found in the theme. It is recommended that the theme implement this functionality instead of using custom fields for thumbnails.
    RECOMMENDED: No reference to add_theme_support( ‘custom-background’, $args ) was found in the theme. If the theme uses background images or solid colors for the background, then it is recommended that the theme implement this functionality.
    RECOMMENDED: No reference to add_editor_style() was found in the theme. It is recommended that the theme implement editor styling, so as to make the editor content match the resulting post output in the theme, for a better user experience.
    WARNING: Found wrong tag, remove from your style.css header.
    RECOMMENDED: add_custom_image_header found in the file custom-header.php. Deprecated since version 3.4. Use add_theme_support( ‘custom-header’, $args ) instead.
    Line 58: add_custom_image_header( $args[‘wp-head-callback’], $args[‘admin-head-callb
    INFO: Possible hard-coded links were found in the file footer.php.
    Line 19: <?php printf( __( 'Theme: %1$s by %2$s.', 'mhenge' ), 'mhenge', 'Underscores.me‘ ); ?>

  33. Pingback: 25 WordPress Theme Development Tutorials to Get Started - Rockable Themes

  34. Linards says:

    Thank you very much for this tutorial instant classic. Been looking for this sort of material for ages.

  35. Pingback: Underscores Tutorial | Al's Musings

  36. Pingback: 25 WordPress Theme Development Tutorials to Get Started - Daily Design Hub

  37. Pingback: Traveling Down The Road | Fires Within

  38. Hey there I was wondering if you could help me. I have been reading and re-reading your tutorial but I am not sure where I am having the issue. I followed all the steps for this theme tutorial but whenever I uploaded it to my WordPress themes, it gave me a error stating that there was something wrong with my functions.php but I tried to read through it and everything looks okay. I was wondering if there was a place where I could find a similar file to compare with the one that I have. Thanks.

Comments are closed.