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.
