Roots HTML 5 WordPress Theme – First Look

30 May 2011 comment icon3 | Categories: theme news

So I’ve been dabbling in a bit of HTML5 of late and have been reviewing how things have progressed in the WordPress development community with HTML5 themes in the past few months. Previously we looked at the Toolbox theme and the reasons why you should start using HTML5 in your theme development.

There’s a few very interesting HTML5 themes starting to pop up for WordPress and we particularly like themes based on the HTML5 Boilerplate project, including:

But the one that really stood out is the Roots Theme which is the brain child of Ben Word.

Roots is somewhat unique amongst these HTML Boilerplate themes in that it goes a lot further than providing a Boilerplate integration into WordPress. Roots does more – much more in fact.

At a glance, it brings together:

What’s more, Roots also goes a step further to help tune your WordPress theme output to clean up some messy WordPress defaults, including:

  • Creates a Homepage and sets it to be your erm…homepage
  • Modifies your permalink structure away from WordPress defaults
  • Adds a lot of rewrite rules to your .htaccess to change WordPress file mappings to cleaner, shorter paths
  • Creates 2 new menus (Primary and Utility) and sets their locations so they are picked up by the theme
  • static theme assets are rewritten to the web root
  • Root relative urls are outputted instead of fully qualified paths
  • wp_head is heavily modified – in particular RSS and jQuery is now called manually via header.php.

NOTE: All of the above happens at the theme activation point so if you’re considering installing and activating Roots on a live site with real eyeballs looking at it – DON’T. First, grab a fresh, empty WordPress install and activate Roots locally so you can see how it all works. This is no ordinary WordPress theme and should be considered more of a WordPress development framework given it tweaks WordPress defaults.

Here’s a sample of the HTML5 output from Roots on a default install of WordPress 3.1.3

<!doctype html>
<!--[if lt IE 7]> <html lang="en"> <![endif]-->
<!--[if IE 7]>    <html lang="en"> <![endif]-->
<!--[if IE 8]>    <html lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<title>WP ROOTS SBOX</title>
	<meta name="viewport" content="width=device-width; initial-scale=1.0"></pre>
<pre id="line13">	<link rel="stylesheet" href="<a href="view-source:http://localhost.dev/wproots/css/blueprint/screen.css">/wproots/css/blueprint/screen.css</a>">
	<link rel="stylesheet" href="<a href="view-source:http://localhost.dev/wproots/css/style.css">/wproots/css/style.css</a>">
	<!--[if lt IE 8]><link rel="stylesheet" href="/wproots/css/blueprint/ie.css"><![endif]-->
	<link rel="alternate" type="application/rss+xml" title="WP ROOTS SBOX Feed" href="<a href="view-source:http://localhost.dev/wproots/feed/">http://localhost.dev/wproots/feed/</a>">
	<script src="<a href="view-source:http://localhost.dev/wproots/js/libs/modernizr-1.7.min.js">/wproots/js/libs/modernizr-1.7.min.js</a>"></script>
	<script src="<a href="view-source:http://localhost.dev/wproots/js/libs/respond.min.js">/wproots/js/libs/respond.min.js</a>"></script>
	<script src="<a href="view-source:http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js</a>"></script></pre>
<pre id="line22">	<script>window.jQuery || document.write('<script src="/wproots/js/libs/jquery-1.6.1.min.js">\x3C/script>')</script>
	<link rel="canonical" href="<a href="view-source:http://localhost.dev/wproots/">http://localhost.dev/wproots/</a>">
	<script src="<a href="view-source:http://localhost.dev/wproots/js/scripts.js">/wproots/js/scripts.js</a>"></script>
	</head>
<body class="home page page-id-4 home">
		<div id="wrap" class="container" role="document">
			<header id="banner" class="span-24" role="banner">
						<div class="container"></pre>
<pre id="line32">				<a id="logo" href="<a href="view-source:http://localhost.dev/wproots/">http://localhost.dev/wproots/</a>"><img src="<a href="view-source:http://localhost.dev/wproots/img/logo.png">/wproots/img/logo.png</a>" width="300" height="75" alt="WP ROOTS SBOX"></a>
				<nav id="nav-main" role="navigation">
					<ul id="menu-primary-navigation" class="menu"><li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-6"><a href="<a href="view-source:http://localhost.dev/wproots/">/wproots/</a>">Home</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7"><a href="<a href="view-source:http://localhost.dev/wproots/sample-page/">/wproots/sample-page/</a>">Sample Page</a></li>
</ul>				</nav>
				<nav id="nav-utility">
					<ul id="menu-utility-navigation" class="menu"></ul>				</nav>
			</div></pre>
<pre id="line40">		</header>
				<div id="content" class="span-24">
					<div id="main" class="" role="main">
				<div class="container">
											<h1>Home</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat, orci ac laoreet cursus, dolor sem luctus lorem, eget consequat magna felis a magna. Aliquam scelerisque condimentum ante, eget facilisis tortor lobortis in. In interdum venenatis justo eget consequat. Morbi commodo rhoncus mi nec pharetra. Aliquam erat volutpat. Mauris non lorem eu dolor hendrerit dapibus. Mauris mollis nisl quis sapien posuere consectetur. Nullam in sapien at nisi ornare bibendum at ut lectus. Pellentesque ut magna mauris. Nam viverra suscipit ligula, sed accumsan enim placerat nec. Cras vitae metus vel dolor ultrices sagittis. Duis venenatis augue sed risus laoreet congue ac ac leo. Donec fermentum accumsan libero sit amet iaculis. Duis tristique dictum enim, ac fringilla risus bibendum in. Nunc ornare, quam sit amet ultricies gravida, tortor mi malesuada urna, quis commodo dui nibh in lacus. Nunc vel tortor mi. Pellentesque vel urna a arcu adipiscing imperdiet vitae sit amet neque. Integer eu lectus et nunc dictum sagittis. Curabitur commodo vulputate fringilla. Sed eleifend, arcu convallis adipiscing congue, dui turpis commodo magna, et vehicula sapien turpis sit amet nisi.</p>
										</div>
			</div><!-- /#main --></pre>
<pre id="line48">							<aside id="sidebar" class="" role="complementary">
							<div class="container">
				</div>
						</aside><!-- /#sidebar -->
				</div><!-- /#content -->
				<footer id="content-info" class="span-24" role="contentinfo">
						<div class="container">
												<p class="copy"><small>&copy; 2011 WP ROOTS SBOX</small></p></pre>
<pre id="line57">			</div>
		</footer>
	</div><!-- /#wrap -->
</body>
</html>

You’d definitely have a hard time knowing this sandbox site was running WordPress at all. So if that’s important to you – the Roots theme is a great place to start.

Observations about Roots

I must admit while the Roots WordPress theme is technically very impressive and they’re definitely on to something here, I’m not sure that WordPress purists will be very comfortable about some aspects of Roots. For example, while the path rewrite does clean up path output in the core markup, I’m not sure how this might impact with other WordPress plugins or conventions somewhere further down the line. It just makes me nervous. But it’s nice to see someone challenging WordPress defaults with alternatives – at a minimum this should prompt debate. Also, this won’t be of any benefit to you if you’re using a CDN to serve static content assets. I would imagine though that maintaining Roots will become a royal pain in the ass in the long term as WordPress structures evolve and countless htaccess and php functions need to be revised. Nevertheless, I intend to experiment a bit more with Roots and the other BoilerPlate themes over the next few days and will report back with my progress soon!

3 Responses to “Roots HTML 5 WordPress Theme – First Look”

  1. Daniel "Website Designer" Iser on 16 June 2011 at 3:16 am said: Permalink

    Very nice. HTML5 is gonna make a lot of things much easier. One problem ive found with all the html5 themes is that they can only wrap most of the content. Widgets can turn pretty semantics to garbage.

    We just released a new plugin for wordpress to help with this. HTML5 Widgets allows you to change the wrapper for each widget to either aside, section or nav. Now you can wrap your vertical menus, categories archives etc in the nav tags.

    Check it out here http://wizardinternetsolutions.com/plugins/html5-widgets/

    and on wp.org at
    http://wordpress.org/extend/plugins/html5-widgets/

    • Ed on 16 June 2011 at 9:32 am said: Permalink

      Hey Daniel,

      You’re right about a lot of HTML5 theme just wrapping new tags around existing markup. It reminds me of the early divitis days when people would just use divs like table tags. Your plugin looks like a great concept. I’ll be sure to give it a go in the next few days.

      Ed

  2. Zack on 9 March 2012 at 9:41 pm said: Permalink

    The css files are not working on the roots theme due to the URL’s for the files being wrong on my ubuntu localhost installation of this theme. Can’t figure out how to make it find the right default CSS files like it’s supposed to.

Leave a Reply

Dog