Home » WordPress plugins » Thematic html5

Thematic html5 will make any theme based on the Thematic theme framework use html5 elements. It requires Thematic 1.0 or later and uses the built in filters of Thematic to change the markup in desired places.

The plugin is intentionally very bare bones, no settings or checkboxes, just activate and go. You can verify that your site is using html5 elements with the developer tools in chrome or firebug for firefox or similar.

Download

Download it from the official repo or install it directly from the add new plugin screen in your WordPress admin.

Download Fork it on github

Ideas, bug reports and general feature requests are welcome at the github issue tracker.

Features

Swap in html5 elements such as nav,article, header, and footer, where applicable

Add a html5 shiv for older Internet Explorer browsers. Will detect if your theme uses modernizr and not add any script unless necessary. There is a filter hook available to turn it off.

Add conditional comments from the html5 boilerplate for easy targeting IE in your stylesheets. Can also be switched off with a filter.

Respects any childtheme_override_* functions. If you have defined any override functions in your child theme they will still work. They will override this plugin’s loops as well. You will then need to make sure that your override loops uses html5 yourself.

Markup changes

  • doctype changed to <!doctype html>
  • meta tag “charset” added to <head>
  • defunkt meta tag http-equiv=Content-type removed (replaced by meta tag above)
  • the #header and .entry-header uses the <header> element
  • the nav_menu, page_menu, post pagination links, nav-above and nav-below all use the <nav> element
  • the loops are using the <article> element for individual posts.
  • the post title will always be a <h1>
  • the #footer and .entry-utility uses the <footer> element
  • widget areas are <aside> elements, with individual widgets as <section> elements. The widget title is <h1>

The html5shiv

Thematic html5 will check whether modernizr have been enqueued first, and only adds the shiv if necessary. As long as your child theme properly enqueues the script with wp_enqueue_script() you should be fine. If you are not using modernizr but some other script, you can add your script handle to the array that the plugin checks like so:

function childtheme_add_modernizrhandles( $handles ) {
    $handles[] = 'my-script-handle';
    return $handles
 }
 add_filter( 'thematichtml5_modernizr_handles', 'childtheme_add_modernizrhandles' );

Or alternatively turn off the script completely with a simple one-liner.

add_filter( 'thematichtml5_use_shiv', '__return_false' );

Boilerplate conditional comments

There seem to be a bit of debate lately on whether or not to use the conditional comments. In the future they will not be necessary, but are useful if you still want to support older IE without resorting to browser hacks. If you for some reason want to remove them, you can do so with

add_filter( 'thematichtml5_use_ieconditionals', '__return_false' );

Changelog

0.4
  • Added: conditional comments classes to opening <html> tag
  • Added: html5shiv javascript for older IE
  • Changed: Added a structural .inner div to the widget areas for styling flexibility
  • New filter: thematichtml5_use_html5shiv, defaults to true
  • New filter: thematichtml5_html5shiv_url
  • New filter: thematichtml5_use_ieconditionals, defaults to true
0.3
  • Move plugin class to it’s own file
0.2
  • Plugin rewrite to use OOP
0.1
  • Initial release

Download

Download Fork it on github

Ideas, bug reports and general feature requests are welcome at the github issue tracker.

3 comments

  1. majicmike says:

    This is ‘EXACTLY’ the thingy i’m needing and i am so impressed here to have found exactly the hopeful solution to my Query..
    Thank you middlesister – Karin..
    PS: I’ll email you!.. (‘ ‘,) majicmike

Comments are closed.