While the most minimal of WordPress Themes really only need an index.php template and a style.css file (or just the style file if it’s a Child Theme) most need something a little more solid.
Let’s create the directories and files that will make up our _s-based theme, Shape.
Now we’re starting to get into the real meat of WordPress Theme development: coding the HTML structure.
The Goals of Any HTML Structure
When coding a web site, you should have 2 goals in mind: lean code and meaningful code. That is, using as little markup (HTML tags) as possible and making sure that the markup is meaningful by using semantic class and ID names that refer to their content, not how they “look” (class=”widget-area” instead of class=”sidebar-left”).
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.
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.
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 some simple instructions in the theme
readme.txt on how to get started with our new starter theme, _s, but, to be honest, I’m not exactly the most reliable readme reader myself so here are those instructions with a bit more explanation.
The first thing you want to do is copy the
_s directory and change the name to something else. Like, say, megatherium.
Then you’ll need to do a three-step find and replace with your favorite text editor on the _s name in all the templates.
Have you checked out the Toolbox theme? Up until recently it was the starter theme we used to build free and premium themes on WordPress.com. Toolbox was (and is!) a great theme, but it could be better. Unfortunately, we wound up in a situation with Toolbox where we wanted to make some more drastic improvements to it as a starter theme but got a little stuck. We had people using it as a Parent Theme and that meant that the simplest id or class change could become a problem. Simply changing an id of
#masthead in the template is enough to break most CSS.
And there were other more beneficial but potentially more disruptive changes we thought would be great to add to it. Changes like better starter styles, including a generic framework for adding your own responsive CSS; a script for elegantly handling menus on small screens; and easy-to-rework sample theme options. And whole lot more. The sort of things we found ourselves adding to 80% of the themes we were building. You know, the sort of things that you really need in a starter theme.
So, we forked Toolbox — don’t worry it’s still being updated — and made a better, faster, stronger, starter theme. A developer-only theme that gives us the freedom — us being the WordPress.com Theme Team — to iterate with abandon on the idea of WordPress starter themes. Since that theme underscores the new themes we build we call it the Underscores Theme, or
_s for short.
And it’s pretty darn awesome.
The other day I was asked over dinner what I thought WordPress themes were going to look like in 2012. The big themes and ideas — the future! — that sort of thing. It’s something I love talking about and sharing (obviously). I see two big trends making their way through the WordPress community. Here’s what I said.