What WordPress Theme Developers Can Learn from Twenty Twelve

We’ve all been waiting for the new default theme for WordPress, and it has finally arrived. Without a doubt, Twenty Twelve is one of the best themes I’ve ever played with. It’s so simple, clean, good-looking and filled with so much awesomeness inside.

I’m sure that by now you have downloaded the theme, or at least checked out the demo. In this short review I’d like to point out the things that make Twenty Twelve so awesome, and what you can learn from it. If you find other gems worth mentioning, don’t forget to share them by posting a comment.

1. Flexible Title Tag

Instead of building a “SEO friendly” title directly in the header.php template, Twenty Twelve does so with a filter to wp_title in functions.php, leaving a single neat call to wp_title() in the header file. This allows child themes and plugins to override the title tag completely, without having to resort to output buffering and other hacky techniques. See header.php and twentytwelve_wp_title in functions.php.

This, however, does not mean that Twenty Twelve is not SEO friendly or whatsoever. It’s just as good as Twenty Ten or Twenty Eleven, I’d say even better with all that sexy markup, and you are definitely not required to use any SEO plugins with Twenty Twelve. In fact, I encourage you not to ;)

2. There’s No Such Thing as Too Much Escaping

Security is essential to all things WordPress. Core, plugins and especially themes, because security in themes is often overlooked. A great WordPress theme can not be great without being secure.

Escaping values plays a major role in security, and WordPress has got quite a few functions to help you escape strings, numbers, URLs and even SQL statements. It is considered best practice to escape as late as possible which usually means right before output. And if your value has been escaped earlier, don’t worry — escaping an already escaped value will not hurt!

Twenty Twelve is a great example of good escaping, especially translated strings. One might think that translated strings are not user values, and thus can be trusted. This is true, but a translation with a quotation mark can easily break an HTML attribute, which is pretty difficult to debug. For such cases, the esc_attr_e function is your friend.

3. Where are My Theme Options?

A bazillion of theme options, thousands of page layouts, sixty four sliders and a shortcode generator? No, thank you. Twenty Twelve doesn’t even have a theme options panel! It works right out of the box and looks perfect as is. For customization, Twenty Twelve implements most core features such as custom headers and backgrounds, and you can easily go further with Custom CSS.

A couple of page templates will help customize the layout of certain pages. The homepage template is a really good choice when using WordPress as a CMS versus blog.

4. Page Templates in a Subdirectory

Speaking of page templates, did you know that since WordPress 3.4, you’re allowed to keep your theme templates in a subdirectory? It’s really handy, especially in themes with more than two page templates.

Note, that if you’re updating an existing theme, moving your page templates to a subdirectory might break the existing page templates settings in WordPress, so you better find a way to migrate or at least warn your existing users about the change.

5. Responsive Layout and Navigation

Twenty Twelve has a responsive layout, meaning it looks and works great in desktop and mobile environments, which is rather important in today’s world of mobile. For devices with a small screen size, Twenty Twelve will replace the whole menu with a “Menu” button, which reveals the menu when clicked or touched.

This is useful, especially for large navigation menus, where you’d have to constantly scroll down to the content, on every page load. See header.php and js/navigation.js.

6. Soft Crop for Post Thumbnails

Twenty Twelve sets the post thumbnail size to 624 x 9999, with a soft crop, which sounds quite weird at first. This allows users to choose portrait images and photos up to a ratio of 1:16, and make it look good and respond well, just like a landscape image would. I think this is a rather interesting technique for responsive themes. See twentytwelve_setup in functions.php.

7. Google Web Fonts

Open Sans is one of my favorite fonts, and it’s very easy to use with Google Web Fonts. For languages with characters not supported in Open Sans, Twenty Twelve allows translators to turn the Google Font off, or load additional font subsets, such as cyrillic, vietnamese or greek. Toggling options via localization functions is quite an interesting (and maybe a slightly confusing) approach, which I like to call “theme options for translators.”

Twenty Twelve uses wp_enqueue_style to load the Google Web Font. It’s important to use wp_enqueue_style rather than to @import the font directly from your stylesheet, or even worse — hard-code it in your header.php template. The wp_enqueue_style approach enables child themes (or plugins) to dequeue the stylesheet and use a different font instead. Flexibility for the win!

It’s also worth mentioning, that even the main stylesheet in Twenty Twelve is done with a call to wp_enqueue_style for the exact same reason. See twentytwelve_scripts_styles in functions.php.

8. Asynchronous Customizer Settings

The Theme Customizer has been introduced in WordPress 3.4, and although Twenty Twelve doesn’t create its own custom settings in the customizer, it adapts very nicely to the existing ones, by setting their transport to postMessage and handling the events in javascript. This allows Twenty Twelve to respond to the change of those settings without having to reload the page, creating a better user experience.

The related code can be found in theme-customizer.js and in the functions.php file during customize_register.

9. But What About the Other Features?

Even thought Twenty Twelve is a default WordPress theme, it doesn’t implement all of the possible core features. Twenty Twelve supports only five post formats, has only one navigation menu, no custom sidebar widgets, and doesn’t ship with any default custom header or background images.

However, if you need any of that and more, you can easily extend Twenty Twelve by using a child theme, which makes it a great parent theme to use.

That said, there’s so much more you can learn from Twenty Twelve just by reading its source code. So if you’re into WordPress themes development, and looking to create your first (or your hundredth) theme, don’t by shy to dig into Twenty Twelve’s template files, there are many hidden gems for everyone!

That’s about it, folks. What have you learned from Twenty Twelve? How has Twenty Twelve influenced your current or future WordPress themes development? Please share your thoughts in the comments section!