Roots—A HTML5 WordPress Theme Framework

A couple of weeks ago we published an excerpt of Build Your Own Wicked WordPress Themes, in which we talked about some theme frameworks to use for speedy theme development. Since the book was originally published, we’ve seen even more theme frameworks arise, each with their own strong points and features. 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. We’ve learned about the benefits of these, and other frameworks, in a previous article.

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Mike

    It seems as though changing themes on an existing site is becoming less practical.
    As you mentioned Roots will inject new content and change your URLs. Others require custom fields on posts, and many seem to add functionality that could clash with plugins (e.g. Analytics code, page titles/descriptions)

    • http://www.heyraena.com Raena Jackson Armitage

      Hi Mike,

      It’s true that you might have a bit of a mess on your hands if you were to apply this as-is to an existing site. Since this is a development-focused theme framework, though, I doubt you’d apply it to an existing blog without some serious thought and planning beforehand! Thanks for the note :)

  • Patrick Samphire

    Excellent. I’m in the middle of building an HTML5 theme. I’ll take a look at this to see if there’s anything important I’m missing and can incorporate.

  • Spencer

    This is fantastic. I’ve been toying around with “Toolbox” (of theme shaper fame) for the past couple of days. So far this looks a little bit more up my alley – as I’m a novice developer.

    Also excited to HTML5 boiler plate incorporated.

  • Russell Heimlich

    I just built my own starter theme framework as I think most serious developers would. Pick and choose what features make the most sense to you and your project. Mine is available at http://svn.kingkool68.com/projects/rh-starter-theme/

  • BrenFM

    Ooooooo awesome! Looking forward to giving this a test run.

    And super double awesome!! We’ve now got the email address back in the comments submission form! Welcome back, Gravatar! i’ve missed you!

  • kaf

    I cannot comprehend the confusion of concepts that would result in a Content Management System requiring a framework for writing themes.

    I think I’m going to steer clear of the wacky world of wordpress.