Developing WordPress themes is a lot easier these days. With the variety of theme development frameworks available to work from, we can now spend less time producing the default/standard code that WordPress needs to function, and more time designing and developing the actual website we want to create. No longer do we need to type endless lines of repetitive code, or browsing the WordPress codex for hours on end, looking for functions we require.
While it is always worth having the knowledge of building a theme from the ground up (yes, it is worth trying this, it’s the best way of learning what each WordPress function/template tag does), it’s generally accepted that using a theme framework is the best way of starting your new WordPress project.
There are a wide variety of different frameworks out there – notable frameworks include the default WordPress theme TwentyTen, the awesome blank canvas from Elliot Jay Stocks known as Starkers, and the powerful Hybrid Core.
Some developers prefer to work with a blank framework (like Starkers), or use frameworks with built in “bespoke” functionality (like Hybrid) that may suit a particular project. For the majority of my websites, I’ll begin with a blank canvas framework, with my theme of choice being Starkers.
However, with the web now ready to accept HTML5 a whole lot more, I’ve recently been on the hunt for HTML5 frameworks. Here’s a round up of the best (in no particular order)…
1. Twenty Ten Five
Despite including a HTML5 doctype, Twenty Ten doesn’t offer much HTML5 markup. Richard Shephard has made the effort to change that. Check out Twenty Ten Five for a fully HTML5 developed version of the Twenty Ten theme we know and love.
2. HTML5 Reset (WordPress)
HTML5 Reset is a clever collection of files, perfect for starting new HTML5 projects. A WordPress theme/framework is also available. It makes of awesome HTML5 markup (as you’d expect), browser specific css (e.g. “.ie body”), and both Modernizr and Analytics are built in. Sound good?
3. Roots
The “Roots” theme offers some lovely clean HTML5 microformat markup, a Boilerprint base, and also some cool customisation with the 960 grid system.
4. Starkers (HTML5 Version)
Like Twenty Ten, Starkers includes a HTML5 doctype, but no real HTML5 markup. Nathan Staines has taken the best blank canvas around, and introduced plenty of HTML5 goodness.
5. Whiteboard
Probably my personal favourite at the moment… The Whiteboard framework’s biggest feature is it’s fully responsive layout (perfect for mobile and tablet viewing). However, it’s HTML5 markup isn’t the best, and you may find yourself redoing a fair bit of code. Your choice!
6. Bones
*Reader Recommendation
Recommended by JSEL in the comments below, this is a development theme that has somehow escaped me! Upon inspection, it looks pretty amazing. It’s been built with HTML5 boilerplate, has 960 grid compatibility, built in functions and post types have been included, and the HTML5 markup looks very tidy. I’ll be trying it out…
Conclusion
As you all know, I’m a big believer in HTML5, so in terms of WordPress development, these frameworks and themes are what I’m switching my attention to. If you haven’t had much experience with HTML5, I recommend you check out my previous HTML5 Template Building blog, before working with the markup in WordPress!
11:51 05/05/2011
you can add http://themble.com/bones/ to list.
12:24 05/05/2011
Cheers for the suggestion! I’ve added it to the list as it does look quality… nice find!
01:14 11/05/2011
Jack,
Great site, great article. As a pretty savvy tech person with good understanding of html and css, but completely new to wordpress and their php based themes, which framework would you recommend is the best with consideration of ease of use to modify, and features, to build a personal blog similar to markdotto.com?
-best
07:56 11/05/2011
Hi Matt,
If you haven’t worked with WordPress too much yet, I’d probably advise you to check out Starkers, whether it’s the original, or the HTML5 version listed above. With no CSS included, it’s literally a blank canvas with only WordPress functions included in the design.
It should enable you to implement your knowledge of HTML and CSS into the design fairly easily, while learning how WordPress works with the built in PHP. You can definitely customise it to look and work like Otto’s blog!
Jack
15:51 12/05/2011
Hey Jack, did you intentionally leave out Less Framework?
http://lessframework.com/
If so, why?
16:01 12/05/2011
Rafael,
Less Framework, while extremely useful, doesn’t offer a WordPress ready theme to go with it, hence it not being in the list! The “Whiteboard” theme however is built around Less Framework if you’re into the whole responsive thing…
14:47 13/05/2011
Ha. Somehow missed that Whiteboard link on the Less Framework page.
You mentioned that the HTML5 markup on Whiteboard isn’t the best – is that due to it being based on Less Framework?
Also, since Whiteboard Framework is open source, it would be great if you could contribute the code you’ve re-written back to the project to make it better. Any chance of that happening? =)
09:12 17/05/2011
Nothing to do with Less Framework. Being it a HTML5 based theme and all, I was hoping for the developers to make better use of new HTML5 elements such as article, header, footer, etc. They only seem to have been thrown in sparingly unfortunately.
Hmm, the code I’ve got is amongst a lot of other bespoke theme markup! I’ll see if I can upload a clean, modified version of Whiteboard at some point though.
Cheers Rafael,
Jack
13:32 30/05/2011
Nice Job man.
02:56 22/06/2011
Thanks for the love regarding Bones! Nice to see people find it useful.