The marketplace for Premium Themes — & — Templates

2,206,234 People using Mojo
353,564 Downloaded items
2115 Marketplace items
2 Green Monsters

The Mojo Blog

Blog | WordPress Wednesday: HTML5 Templates

WordPress Wednesday: HTML5 Templates

Posted By Bryan Petty

No Comments

WordPress Wednesday: At MOJO Headquarters we are lucky enough to have two in house WordPress Core Contributors, Mike Hansen and Bryan Petty. Each week we’ll be sitting down with them to get the inside scoop on what’s new with WordPress.

It has always been possible to write up full HTML5 compatible templates (at least up through the current W3C and WHATWG standard recommendations anyway) in a number of slightly hacky ways in older versions of WordPress. However, WordPress has made a significant effort to bring these standards into core template functionality in 3.6 so those various hacks are hopefully no longer required. I figured it might be nice to outline some of those changes this week.

HTML5 Content

First up is content input by your users. WordPress 3.6 introduces built-in native HTML5 audio and video shortcodes. This is probably the most important reason your themes need to make the switch to HTML5 if you haven’t already done so. These can’t be turned off currently. Your users are going to be adding HTML5 content regardless of whether your theme uses the HTML5 doctype or not, so if you aren’t, this will be broken for your users.

Additionally, the TinyMCE editor has been updated to handle proper filtering of (most) HTML5 elements like “article”, “section”, “canvas”, “header”, “footer”, etc. These used to not be recognized, and as such, they were filtered like any other illegal HTML elements blocked in posts, they aren’t anymore now though. Your themes may want to add some additional styles for many of these new elements regardless of whether you use these directly in your themes or not.

Theme API

Two of the most prominent changes in the theme API in order to support HTML5 can be found in the comment forms and search inputs. No theme API has been switched to use HTML5 elements by default in order to ease the pain of possibly breaking a number of themes that weren’t designed to use HTML5, so any code calling into the theme API needs to be updated to make use of the new HTML5 formats.

For comment forms, you might be making use of the function “comment_form()” to automatically add simple comment forms to your theme. In order for this for to use HTML5, you should update this to use the new “format” argument:

<?php comment_form( array( 'format' => 'html5' ) ); ?>

Search inputs are a little different. Instead of adding an additional parameter, themes making use of the built-in search-form.php template file need to explicitly declare theme support for HTML5 search inputs:

<?php add_theme_support( 'html5-search-form' ); ?>

When using these new HTML5 form inputs, WordPress uses the appropriate “email” and “url” input types, but purposely does not use the native form validation on those inputs, leaving it up to server-side form validation. You might think this defeats the purpose of using these new types, however, it’s worth noting that one of the biggest benefits of still using them comes from mobile browsers which now know the appropriate keyboard context to bring up for easier form input.

If you have additional tips for writing HTML5 compatible themes, chime in below, we’d love to hear them.

You must be logged in to post a comment.