I’m pleased to announce the release of my first WordPress theme today—Brave New World. The theme is free of layout and styling beyond a modified version of Eric Meyer’s reset CSS and a baseline typography. Just like Elliot Jay Stock’s Starkers theme this is a base theme free from cruft yet incorporates HTML5, WAI-ARIA landmark roles and hCard and hAtom microformats.
HTML 5?
Yep, it’s the new kid on the block and everyone should say “Hi!”. Keeping up with this evolving spec could be pretty time-consuming if it were not for the excellent HTML 5 Doctor. Complementing the Doctor is the HTML 5 Gallery that is doing a great job curating live HTML 5 websites.
Internet Explorer chokes on HTML 5 without a small piece of JavaScript to create the new elements in the DOM so this is the one piece of (included) JavaScript you do want to load in the header. This allows IE to see the styles you apply to them but because they are treated as inline elements rather than block I have added a line to the reset.css file:
header, nav, section, article, dialog, figure, aside, footer {display:block; margin:0; padding:0;}
Here’s a quick overview of the template structure:
- The site title is wrapped in a
tag. - The main content is wrapped in a tag.
- Each post on the home page is wrapped in a
tag. - Each post has a
tag for the title with a nestedfor the post date and microformatted author name. - Each post has a tag for the excerpt or full content.
- Each post has a
tag for the metadata. - Each comment is an
inside a commentsthat is nested inside the post. - The sidebar is marked up with the
tag. - The footer is marked up with the
tag.
This structure also gives me the necessary hooks to incorporate the hAtom microformat which I shall come onto after introducing WAI-ARIA to you.
Why ARIA?
The Web Accessibility Initiative’s Accessible Rich Internet Applications suite (WAI-ARIA) is a soon-to-be released W3C standard for defining ways to make web content and web applications more accessible to people with disabilities. It’s especially helpful with dynamic content and advanced user interface controls developed with Ajax etc to interact with assistive technologies. Specifically, I’ve applied Landmark Roles to this template. These roles identify common areas of a web page and allow assistive technologies to develop features to help users identify and navigate to sections of page content. These consistent, semantically-named roles are seen as superior to the traditional “skip to content” links we previously used. You would be right in thinking that the new HTML 5 elements would give you that too but as yet the assistive technology developers have not gotten involved with HTML 5 whereas they did with WAI-ARIA. Consider it a belts and braces approach in that WAI-ARIA complements HTML 5 very nicely:
role="banner"on the first (site-title)tag.role="main"for the mainwrapper.role="navigation"for the sidebar.role="contentinfo"for the main.
WordPress 3.0 introduces WAI-ARIA aria-required="true" to required input fields in the comments form. I’d love to make the comments form use HTML5 but haven’t figured out how to override the defaults yet—this parent theme stuff is a bit new to me.
hAtom and hCard microformats
The hAtom microformat, although a draft (version 0.1) is based on the Atom syndication format and as such is suited to content syndication (primarily blog posting). Here’s a quick overview of how I applied the microformat:
- The main is given a class name of
hfeed. - Each
(post) is given a class name ofhentry. - Each post title is given a class name of
entry-title. - Each
tag is given a class name ofpublished. - The author is marked up as a simple (and required) hCard microformat with an additional
authorclass name. - Each for the excerpt is given a class name of
entry-summary. - The full post is given a class name of
entry-content.
Support
This theme is provided as-is, with no promise of support actually, although I’ll help out where I can if Google can’t help you first. I hope you find this useful, please let me know in the comments below and spread the word if you do. If you find any errors, please let me know in the comments below. If you can provide the file name, line number or some other signpost to where the error is if at all possible, that would be great thanks—the extended use of functions.php is quite the learning curve during the early days of WordPress 3.0.
Download the Brave New World WordPress Theme here (215Kb zip file). I’ve ran my anti-virus over it, but so should you.
Update: 7 April 2009
I made a slight amendment to the CSS reset today in light of the work done by Jacob Rask regarding the removal of elements no longer used by HTML5.
Update: 1 July 2009
- Comment block now marked up with
tags. - Removed a div, span and class=”url” from the post header.
- Updated this post with a lot more detail on the hows and whys of the theme.
Update: 7 July 2009
- Sidebar block now marked up with
tags. - Now linking to the html5.js script hosted on Google Code – thanks Remy!
Update 28 June 2010
- Completely rebuilt for WordPress 3.0 using the new default theme “Twenty Ten”
- Hat tip to Elliot Jay Stocks for his work on Starkers 3.0 upon which this theme is also built.
Hi Karl,
Do you plan on putting up a demo of this theme, so that we can see the markup structure?
Cheers, Matt
Hi Matt,
I hadn’t planned a demo as such but I do need to find time to explain my approach. I blogged it to the same level of detail as Elliot did with Starkers, but considering the tech involved that wasn’t my brightest idea
Regards, Karl
Hi Karl,
Can I suggest you change from using a static html5.js (the one included in the JS directory) to hot linking the version I’ve just today pushed up to Google code.
The reason for doing so means it will automatically benefit from additional elements (for example the copy of html5.js is missing the hgroup element – no that I can ever image using it).
It’s being served with the right mime type, so it shouldn’t cause you any problems:
http://html5shiv.googlecode.com/svn/trunk/html5.js
Cheers,
Remy.
Awesome! Very cool HTML5 theme for WordPress. A copule of comments:
This validates as XHTML5, which I prefer anyway since you have self-closing tags for elements like meta and link. Mostly just an FYI.
Once you get into any Post, you’ll notice in the markup that there are two H1 tag sets, one for the logo/site name and one for the Post title. No matter your preference, there shouldn’t be two H1 tags in the document!
I think the best markup replacement for this is to have an if statement on the H1 in the header tag so that if it’s not the front page this tag becomes a div or paragraph with an ID property.
I think the H1 tag should always be the page’s description, and when you leave the homepage, the logo or site name becomes secondary to the Post or Page title. Thus, the H1 should change ownership.
Just thought I’d throw this out there. Thanks so much for providing this!
Hi Micah, thanks for the feedback – that’s a good idea, I’ll have to look into it!
@Micah: Technically, in HTML5 its perfectly valid to have multiple H1 elements. HTML5 utilizes a context-sensitive outline, where each header, footer, section, aside, etc. can each use H1-H6 and the headings are weighted against each other by their parent’s position in the outline.
The equivocation of H1 to “page title” is really a bastardization of the spec for the purposes of SEO and aiding assistive devices. HTML5 provides better (and actual) hooks. It’s fine to have multiple H1′s because the search bot or screen reader will know that the H1 in the header element is of greater value than an H1 in an aside element, etc.
That said, this all hinges on support for HTML5 in these devices, which obviously is anything but guaranteed at this point. As a result, it is probably still best to have only one H1 at this time.
Thanks very much for the theme. It was easy to implement with everything stripped out but the basics. And it’s a great way to get your feet wet with HTML5.
Karl,
Thank you very much for this theme. I’m using it as a template for my own theme (in progress). However, I’m running into an issue using the comment form on Brave New World, right out of the box. When I try to submit a comment as a non-logged-in user, I receive the following error:
Error: please fill the required fields (name, email).
despite having filled in all of the necessary details.
I’m running WordPress 2.9.2, I was wondering if there was something amiss with the way commenting works with this theme and the most recent version of WordPress. Any ideas?
Hmm, obviously it should work – I think I used it for my freelance site (although I subsequently moved the blog part to Tumblr). I’ll drop you an email if I find anything and post a fix here if necessary.
Thanks, Karl
Hey Karl,
I ran in to a problem while customizing, and I think it’s because line 53 of comments.php should close (the comments section) rather than (the post). It was causing sidebar wackiness in IE which went away when I made the change.
Hi Karl,
I think I figured out the issue. At the bottom of your comments.php file is this string of code:
input type="hidden" name="_wp_unfiltered_html_comment" value="6324ec756a"When I removed that, my comments started working.
Thanks!
Thanks for the feedback guys, I’ll check that section out and amend accordingly.
Regards, Karl
oops my html didnt appear what i said was
meta http-equiv=”imagetoolbar” content=”false” /
Was giving me an error in the w3 validator, I fixed it with:
[left and right brackets removed]
!–[if IE] meta http-equiv=”imagetoolbar” content=”false” /![endif]–
No problem, that’ll satisfy the validator. I forgot to Dropbox this project from the work laptop, but I don’t think I even bother with imagetoolbar now.
Good work on the new theme, Karl! Nathan Staines and I are working on an HTML5 version of Starkers 3.0 as well, so we’ll take a look at what you’ve done and then perhaps combine all of them into one theme (Transformers style)!
Thanks! That would be great Elliot, right now it’s a PHP step too far for me so looking forward to it.
Hi!
I like your heme, but i don’t get the thumbnail thing. I’m using wordpress 3.0. What images do you use for the thumbs? The featured images or any image in a post?
Thanks Mark,
I’ve not used that feature yet, so would have to refer to the WordPress Codex for the details.
Regards, Karl.
Hi,
Thanks for a great theme. I’m using it for the first time. I wonder if you could help with this?
I’m using wp_title() in the field. It works well but I also need to use it as a page title but in this instance it adds the >> plus the blog name. I can see where this is in the functions file, but I’m not sure how to modify this. Would it be easier to delete that function and fall back on: to distinguish from page title?
Thanks for your help.
Sorry. Meant to say: I’m using wp_title() in the title tag (rather than field)
fall back on wp_title and wp_bloginfo I mean.
Hi Giselle,
Thanks for your feedback
Pretty much an essential plugin for WordPress-powered sites is the All in One SEO Pack. I leave the default function in place and let the plugin do it’s thing with overriding it. Give it a go as it allows you to structure titles for all manner of page types.
Hope this helps.
Regards, Karl
thanks Karl
Hey Karl,
Certainly appreciate the efforts you’ve gone to, but I found this a convoluted theme to build off of. The main culprit is all the custom functions inherited from the original Twenty Ten, a theme which is already debated in the WP community as being a fairly poor example of a theme despite being the default.
If you really think you want to use the Twenty Ten theme functions (the content of functions.php as well as references to them from the template), I might suggest at least refactoring them to use more generic names. “twentyten_custom_foo()” is a pretty confusing term to see when somebody is either using your theme name (Brave New World) or renaming to their own. “theme_custom_foo()” (or a million other variations) would be a much more inviting starting point.
Even though I have moved to another starting point, I’m still very grateful to have found your site and your theme, as it has inspired me to pay far more attention to accessibility as I move forward.
Cheers!
Hi Greg,
Thanks for the feedback – with you on those points. I have my own base theme with a custom functions.php – I learned more building it (the main purpose to be honest) and I know what everything does. Being lazy with this blog so I am actually using 2010
Cheers, Karl