Roots—A HTML5 WordPress Theme Framework

One of my favourite new finds is Roots, a starter theme created by Denver-based developer Ben Word. And whether you’re a grizzled old WordPress veteran or a fresh-faced new theme recruit, I bet there’ll be a feature or two that will put a smile on your face. Let’s take a look at what’s inside.
What are the, er, roots of Roots? It’s based on a combination of the HTML5 Boilerplate project, Elliot Jay Stocks’ Starkers theme, and your choice of the Blueprint or 960.gs style frameworks—plus there’s a dash of the developers’ own secret sauce to boot. If you’re unfamiliar with these projects, here’s a quick breakdown:

• The HTML5 Boilerplate proclaims happily that it’s a “rock-solid default for HTML 5 awesome”—or, basically, a template full of defaults for best practice HTML5 development. Every bell and whistle is rung and blown here, but there’s still room for supporting older browsers.
• Starkers provides a strong, plain theme to use as a basis for your own development—all the functionality with none of the presentational fluff. It’s been a themer’s favourite for some time.
• The 960 and Blueprint CSS frameworks provide a strong grid-based layout system that work in even the most stubborn old browsers, and let you create anything from the most pedestrian bunch of columns to a slick magazine layout. When you use Roots, just pick the one you like best.

Here are some of the improvements Roots makes to WordPress’ default output, and some of the ways in which it helps you as a theme developer.

• Activating the theme creates some sample content and pages for you—for this reason, it’s best to start using it on a brand new site.
• Posts’ markup includes support for the hNews microformat, for juicy, semantic blogging.
• URLs for search results are rewritten to look less WordPressy, which may have some benefits for SEO.
• URLs to items in the wp-content folder are rewritten to appear at the  root of the site, disguising any WordPress-specific URL cruft.
• The theme’s robots.txt file is already set up according to the WordPress team’s SEO recommendations, meaning it’s all ready to disallow access to the themes, plugins, and includes folders.
• The built-in gallery functionality will use HTML5′s figure and figcaption elements.
• There’s a small admin panel that allows you to perform some basic setup for Twitter and Google Analytics, as well as make some rudimentary layout choices. Of course, since this theme is for developers, this is hardly as comprehensive as a pro-blogger’s paid theme, but it’s a great basis for your own purposes.

In the excerpt we posted, we talked about how to decide what framework suits you best. To my thinking, Roots is a great example of the kind of features you should be looking for if you’re seeking out a framework. It’s up to date with today’s best development advice, it’s based on tried and tested projects that many developers will already be familiar with, and it’s been designed with speed and ease in mind—perfect for those of us who like to make it out of the office on time while still doing a great job. There’s a growing collection of documentation, and a glance at the project’s GitHub repository shows frequent updates to both the code and the manuals. A criticism of some theme frameworks can sometimes be that sites made with it have that cookie-cutter feel, but Roots’ gallery shows off a wide variety of layouts and looks—just bring your creativity and start hacking away!
If you’re looking for a super-modern WordPress theme framework, to learn about WordPress development, or if you’re ready to start using HTML 5 in your WordPress projects, consider adding Roots to your list. It’s a strong contender for my next project!