The Problem: You want to start hacking away at a WordPress Theme and get your site online. You don’t want to start with a Parent Theme, or a Theme Framework. You want to make your own theme—and you want it to be ready for HTML5. Only, you don’t know where to start.
The Solution: Start your WordPress theming engines! The delightfully blank, and stripped down, Toolbox theme is here.
The Toolbox Theme: What’s In a Name?
I think the best way to introduce Toolbox is to talk a little about it’s name. Why Toolbox?
A toolbox is something you keep by your side when you’re working on a project. When you need a tool, you reach in and grab one. We hope that the Toolbox theme can work the same way when you’re renovating your own WordPress themes. Reach in to the Toolbox and copy-paste whatever you like into your own theme. It can be a big help.
And, moreover, toolboxes are for building things, right? Sometimes big things. We want you to take this theme, hack it up, and make it your own. You can use Toolbox to build your own HTML5 WordPress themes—right now—for commercial projects or publicly-released themes.
The Elevator Pitch: Why You Should Use Toolbox
Alright. Toolbox is a blank, HTML5, WordPress starter theme. Out of the box, it features:
- The latest in plain, old, semantic HTML5 markup.
- Ultra-minimal (it looks like there’s no CSS at all), fluid, em-based CSS that won’t get in your way when you’re starting a design.
- It’s free to use for commercial and public projects.
And that’s it! A short list of features is the feature.
Remember: toolboxes are for building things. Build your own HTML5 WordPress theme with this one.
Download and preview the Toolbox theme today from the WordPress Themes Directory or get the latest build with Subversion.
Awesome Toolbox photo by skistz.
ThemeShaper 
44 responses
Very nice! It kind of reminds me of Sandbox. I love the very minimal CSS. It makes me want to dive into learning about HTML5. Thanks Ian!
Thanks for sharing. We might use this framework for our next free WordPress theme. 🙂
Ha! I was working on an html 5 version of thematic… now I’m happily trashing all that code.
🙂
Ian, I think there’s a typo in your desc.
“And that’s it! A short list of features is the feature.”
Is it supposed to be future?
Nope. The feature really is a short list of features.
oh… duh. Now I get it. Thanks again!
[…] Toolbox: An HTML5 WordPress Starter Theme A great base to start developing your own WordPress theme not totally from scratch. (tags: wordpress theme html5 development framework) […]
Great work Ian, but I think you should add the reply threading feature 🙂
Already added and enabled. If it doesn’t appear to be enabled, check your Discussion settings.
Ian, how do I change the layout to fixed? Thanks again.
Changing the layout widths from percentages to pixel dimensions or relative em sizes will do it.
Any thoughts on porting/upgrading thematic to HTML5?
Yep. One thing at a time. 🙂
I actually do not want to see thematica jump fully to html 5 just yet. But I would LOVE to see a transitional release with an HTML 5 doctype and valid HTML4 markup (ala TwentyTen). The reason I say this is b/c this allows room for us to grow into HTML 5, without having to immediately worry about IE again and adding stupid #*$#% javascript support just to get IE to know what the heck where talking about (uggh IE again). A transitional strategy is by far my preference here–valid regular ol’ HTML markup (not XHTML) with HTML 5 doctype, for now. It’d be very well received by themtica users IMO.
BTW, I’m *loving* thematica! It’s clear that this was designed by someone who really took the time to think it through and position asides precisely where they needed to be (index top, insert, and bottom come to mind). Now with 3.0, I’d love to see the ability to add asides uniquely for custom content types too. Thank you.
There’s some bloated code, for example,
could be replaced with
Code does not work in code tag 😦
div.menu > ul → ul.menu
Thanks! I’m all for HTML5 themes, especially the unstyled ones.
Been using H5 by Jeff Starr and comparing with Toolbox is fascinating. Will give Toolbox a go in my next site.
Looking forward to HTML5 version of Thematic!
cool, thanks Ian.
I have also made an HTML5 theme based on the Shaper theme that you made last year. It will be interesting to see how you did it
Awesome, thanks. I have a handful of go-to themes I check out whenever I’m trying to figure out the best way to do something, and I’m definitely adding this to the list. Looking forward to digging through it.
I will give this theme a try with a new website we are building. Thanks!
Yiihhaaa !!
You’re the man, Ian !!
Thanks for the Toolbox..
Hi Ian. I’m just about finished developing a Portfolio theme off of Toolbox: http://wptheming.com/2010/07/portfolio-theme/
I’m trying to take care of all the final needling details, like translation. The title filter in Toolbox functions.php looks something like this:
$title = sprintf( __( 'Search results for %s', 'twentyten' ), '"' . get_search_query() . '"' );
I’m not quite sure how translation works, and was wondering it it should stay “twentyten” or be changed to the more generic “themename” you use in the other template files (or if it should be changed to my own unique theme name).
Does translation fallback to “twentyten” if it’s not included in the active theme?
Any links would be appreciate. Thanks for the solid work.
[…] If you’re looking for an awesome HTML5 WordPress starter theme, Ian Stewart has you covered. Posted in: Design, WordPressTags: html5 blog comments powered […]
I don’t see any HTML5 tags on that theme…….The doctype isn’t even the correct HTML5 doctype. Maybe the preview on WordPress.org is wrong?
The preview looks like it’s working correctly now.
I have made a child theme for toolbox, called JustCSS. You can see a demo here:
JustCSS child theme for Toolbox
[…] The theme JustCSS is a child theme of Toolbox. […]
[…] is a child theme so you need to install ToolBox first. You can do this right from the themes menu or downloading it from here. You dont have to […]
I made an unofficial mirror of Toolbox’s SVN repository on Github.
It’s located here: http://github.com/jnrbsn/wp_theme_toolbox
It’s being “synced” daily at 00:00 GMT.
I quite like the concept of what you’ve done here.
I particularly like how the PHP uses the WP coding standards precisely. I know it doesn’t make any real difference, but just keeping things consistent somehow makes it a lot easier to understand.
I’m a little on the fence on the concept of using JS to add support for the new HTML5 tags. From a purist standpoint it’s clearly a good idea, but from a practical standpoint I’m not so sure. Do you know if there’s any SEO benefit to using these tags yet? I’d assume not, but I haven’t really looked into it yet.
Ian, when will we see an updated version of Thematic? Thanks!
There should be another updating heading out soon.
This has become my goto theme for functions and generally trying to remember how the heck certain things are supposed to be done. You’ve really hit the nail on the head here.
The only change I would make is to move some of the stuff between the tags in the header.php file off into the functions.php, enqueue CSS instead of directly outputting etc.
All of my latest themes now include large chunks of the Toolbox functions.php file (along with attribution of course).
Ian,
I love this Toolbox starter theme thank you! I had a question though, do you see a reason to use “Reset default browser CSS” at the top of style.css, or is it not necessary for this them?
I was hoping to get the Expert’s advice on this!
Thanks, John
A CSS reset isn’t necessary though I do use one often. I left it out here because I wanted Toolbox to inherit all the browser defaults and not concentrate on the design.
I added my own just to ensure consistency across browsers, but I like your thinking about leaving it out of this starter theme.
Hi Ian,
I love your theme, thanks for it. I have 2 questions: I don´t find the way to manage the header bar; there are two categories appearing there and I didn´t want the bar to appear. What should I do?
And: when I try to create a page from the backfront I´m getting an error message (“page not found”). Do you have an idea why?
My name is a link to the site I´m talking about.
Thanks a lot!
Hi Ian,
I already solved the second problem, the one about the pages. It didn´t have anything to do with the theme.
But the first problem is still alive… 🙂
I’m not too sure. It might be that the page hasn’t published correctly.
Nice.
You may want to consider integrating some of the features of http://html5boilerplate.com/ as well
Just notice it’s using microformats as well. With HTML5, it’d be better to use microdata http://microformats.org/wiki/microdata
Great work though, this has saved me a fair bit of time 🙂
I just finished my new portfolio design and I based the theme on the Toolbox theme mixed with the HTML5 boilerplate framework.
One thing I don’t like : the sidebar is a div with multiple asides, it should be an aside as the container with multiple article elements for the widget containers.
anyway, gave me a great headstart!
Hi Ian!
It’s a nice job you’ve done there!
Don’t you think it could be alot better if it was w3c valid, do you have any plan regarding this point ?
Thanks!
[…] https://themeshaper.com/2010/07/02/toolbox-html5-starter-theme/ […]