I have faked the HTML5 Boilerplate header styling on my Thematic Theme Framework child themes for a while now. I say faking only because this header is typically associated with HTML5 layouts and while Thematic is a solid framework, the code is just not as modern as it could be. Using the HTML5 Boilerplate header method adds a little functionality, while looking cleaner and more modern to the untrained eye when viewing the source code.
HTML5 Boilerplate Header for Thematic
Originally I would pull the header.php from Thematic into my child theme and comment out 2 lines which felt very dirty by creating one more file. Eventually after a little thought, I figured out it is possible to do this all in the functions.php of your child theme.
// recreates the doctype section, html5boilerplate.com style with conditional classes
// http://scottnix.com/html5-header-with-thematic/
function childtheme_create_doctype() {
$content = "<!doctype html>" . "\n";
$content .= '<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" dir="' . get_bloginfo ('text_direction') . '" lang="'. get_bloginfo ('language') . '"> <![endif]-->' . "\n";
$content .= '<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" dir="' . get_bloginfo ('text_direction') . '" lang="'. get_bloginfo ('language') . '"> <![endif]-->'. "\n";
$content .= '<!--[if IE 8]> <html class="no-js lt-ie9" dir="' . get_bloginfo ('text_direction') . '" lang="'. get_bloginfo ('language') . '"> <![endif]-->' . "\n";
$content .= "<!--[if gt IE 8]><!-->" . "\n";
$content .= "<html class=\"no-js\"";
return $content;
}
add_filter('thematic_create_doctype', 'childtheme_create_doctype', 11);
// creates the head, meta charset, and viewport tags
function childtheme_head_profile() {
$content = "<!--<![endif]-->";
$content .= "\n" . "<head>" . "\n";
$content .= "<meta charset=\"utf-8\" />" . "\n";
$content .= "<meta name=\"viewport\" content=\"width=device-width\" />" . "\n";
return $content;
}
add_filter('thematic_head_profile', 'childtheme_head_profile', 11);
// remove meta charset tag, now in the above function
function childtheme_create_contenttype() {
// silence
}
add_filter('thematic_create_contenttype', 'childtheme_create_contenttype', 11);
HTML5 Boilerplate Style Header Benefits
- While not as important to some, for me having the cleaner look to the document source is refreshing. It just looks cooler and more modern from a front-end developer perspective.
- Thematic already provides the ability to read what browser you are using and provides a body class for you, but using a caching plugin completely kills the functionality. Instead this uses the conditional classes on the html tag giving you the ability to target those old pesky Internet Explorer versions.
- It adds the no-js class for using Moderinizr, most people working with Thematic won’t probably need this, but it allows for the ability to the latest CSS3 techniques while still providing fallback support for older browsers, again, usually versions of IE.
- 4-26-2012 – Now includes the meta viewport tag for correct scaling for responsive Thematic child themes. This is also the default for non-responsive themes and shouldn’t affect them at all.
New HTML5 Boilerplate Header Style
This is how the new HTML5 style code will appear in the header of the web page.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" dir="ltr" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" dir="ltr" lang="en-US">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Dev Site | Just another WordPress site</title>
Old XHTML Thematic Header Style
This is just for reference so you can see the differences between the above HTML5 version, and the XHTML version.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<title>Dev Site | Just another WordPress site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
In short, I can’t see any reasons not to use this on every one of my child themes function.php files from here on out. If you aren’t using Modernizr, you can remove the no-js classes from the above HTML5 header. Keep an eye out for my next post which will take care of adding Modernizr to the Thematic Framework, it’s just a little overwhelming to include here.
Update: Added the meta viewport tag to aid in responsive child themes for Thematic. Also updated the formatting to the Thematic 0.9.8 svn version, it will work for the 0.9.7 versions, but is better formatted (no tabs/spaces in php) for the new version.
Update: Now works with the Thematic HTML5 Plugin by Karin at invistruct.com.
Update: This is no longer needed for Thematic 2.0+, however because it is such a pain in the ass to do if you need it, I will keep this information up just in case someone needs it.
4 replies on “Faking HTML5 Boilerplate Header with Thematic”
[…] thematic by scott nix 2011.11: Leif Halvard Silli, an awesome web standards hacker from Norway wrote in to say… An earlier presentation of the idea that this page builds on, can be found at Big John’s classic IE hacking web site positioniseverything.net, in a guest article from February 2007 by Hiroki Chalfant entitled “#IEroot — Targeting IE Using Conditional Comments and Just One Stylesheet”. […]
Thank you for posting this – I was looking to do exactly this with Thematic. I’ve used HTML5 BP on other projects, and really like how they handle the tag. I was having trouble getting it to happen in Thematic, but your code works like a charm.
Very nice! Thank you for posting your solutions – we were using another version (on some devel sites) that was throwing in some erroneous code because it wasn’t quite handling the Thematic head correctly (that was borking Firebug as a side-effect) – yours worked like a charm – Thanks again!
Glad you both found the snippet useful, the conditional classes for Thematic are pretty awesome. It was a pain since some of the markup was hard coded into the header.php file, I have no clue why the markup is that way. I would be curious to know why it was done that way.