Before we get started building any WordPress Theme, we’re going to need to get our development tools in place. In this post, we’ll run through the best of the best and build ourselves a cross-platform WordPress Theme test environment that would do a professional Theme developer proud.
What is “Theme Sense”?
What is “Theme Sense”? Theme Sense is an intuitive understanding of WordPress themes: the relationship between the files that make up a theme, and how those files fit in with WordPress. Theme Sense is what you’ll have at the end of this tutorial.
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.
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.
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.
- WordPress Theme Tutorial Introduction
- Developing Theme Sense
- Theme Development Tools
- Creating a Theme HTML Structure
- Template and Directory Structure
- Setting Up Your Theme Functions
- Secure Your WordPress Theme
- The Header Template
- The Index Template
- The Single Post, Post Attachment, & 404 Templates
- The Comments Template
- The Search Template & The Page Template
- The Archive Template
- The Sidebar Template & The Footer Template
- Reset-Rebuild Theme CSS & Define Your Layouts
- Custom Background & Custom Header
- Distributing Your WordPress Theme
The amazing Code Wranglers at Automattic recently released version 1.1.1 of the Developer Plugin, which helps you optimize your WordPress development environment (plus saves you time) by making sure you have all of the essential development plugins installed. This new version targets the people who design and develop themes — you! Read on to learn more.
Back in February we introduced you to _s, or Underscores, the WordPress starter theme we use at Automattic to build the majority of our themes (and even when we’re not building themes from it we’re referring to it). It’s come a long way since then with a steady stream of refinements. But one thing about it has always been … less than refined. To fork _s you’d have to do a, well, OK, kind of annoying search and replace routine that could easily trip people up if they did it wrong. Thanks to the efforts of Hugo Baeta and Konstantin Kovshenin that isn’t the case anymore. And they’ve done away with that problem with incredible style. Themers, check out Underscores.me:
You can now download your own version of _s with your own custom theme name — the search and replace is all done for you. All you have to do is theme. Plus, you can see all the beautiful people who have contributed to your favorite WordPress starter theme. Look at them all! Community theme development, FTW.
So, what are you waiting for? Get over to Underscores.me and start developing that awesome theme. We can’t wait to see it.
An important part of the theme development process is testing. As a member of the Theme Team at Automattic I can say that we like to test everything we can! One thing that we have observed is that widget testing can take up a lot of time. WordPress provides 13 widgets, many of which contain a form enabling us to customize each instance. Populating a sidebar with widgets can be rather time consuming especially if you have to tweak each widget’s settings.
Man, theme options. :) There aren’t many more topics in WordPress theme development that inspire more discussion these days than theme options. If you haven’t seen it yet, check out Konstantin Kovshenin’s Theme Options Gallery. Konstantin reviews the best and worst theme options pages around there. It’s where the best discussion on theme options is happening right now.
If you’re interested in HTML Semantics and are looking for a good place to start learning more about it and what it means start out with this post at HTML5 Doctor, Let’s Talk about Semantics. At the very least, you’ll learn why we don’t have a pineapple element in HTML.
If you’re interested in learning more about how to use get_template_part() in your themes and why you might want to, designer and developer, Terry Sutton, has a great post up called Tighter and leaner WordPress templates with get_template_part(). It’s well worth a read. (And not just because he mentions _s though that’s pretty cool too.)
There are a couple of spots that I always keep handy when looking for information about WordPress’ query handling. Consider this Gist an addition to my list: