ThemeShaper Forums » Thematic


Faking HTML5 Boilerplate

(1 post)
  • Started 7 years ago by ScottNix
  • This topic is not a support question
  1. I have been faking a HTML5 Boilerplate header for a while, mainly just because to me it looks cleaner and more modern to the untrained eye. Originally I did it to because of the caching issue which kills the browser specific body classes which otherwise would be so handy.

    Previously I would actually comment out 2 lines and use a similar snippet as below, but I finally figured out I am retarded and could just use the snippet below and accomplish that without pulling the header.php file into my child theme.

    // creates the DOCTYPE section ( html5boilerplate style )
    function childtheme_create_doctype() {
        $content = "<!doctype html>" . "\n";
    	$content .=  "<!--[if lt IE 7]> <html class=\"no-js ie6 oldie\" lang=\"en\"> <![endif]-->" . "\n";
    	$content .=  "<!--[if IE 7]> <html class=\"no-js ie7 oldie\" lang=\"en\"> <![endif]-->". "\n";
    	$content .=  "<!--[if IE 8]> <html class=\"no-js ie8 oldie\" lang=\"en\"> <![endif]-->" . "\n";
    	$content .=  "<!--[if gt IE 8]><!-->" . "\n";
    	$content .=  "<html class=\"no-js\"";
        return $content;
    add_filter('thematic_create_doctype', 'childtheme_create_doctype');
    // creates the head and meta tags
    function childtheme_head_profile() {
    	$content = "<!--<![endif]-->";
        $content .= "\n" . '<head>' . "\n";
    	$content .= "\n\t" . "<meta charset=\"utf-8\">" . "\n\n";
    	return $content;
    add_filter('thematic_head_profile', 'childtheme_head_profile');	
    // remove meta tag, now in the above function
    function childtheme_create_contenttype() {
    	// silence
    add_filter('thematic_create_contenttype', 'childtheme_create_contenttype');

    Another thing I have been using lately is Modernizr, which allows me to provide some fallbacks for CSS, most recently some transitions that weren't supported well in older IE's (7 and 8) so they look half way decent without the transition.

    So if you use the above, you may also be interested in a little template I have been using to manage scripts. I kept forget all the crap without referencing old snippets, so I got in the habit of doing it like this (below).

    // script manager template for deregestering and registering files.
    function childtheme_script_manager() {
    	// wp_enqueue_script template ( $handle, $src, $deps, $ver, $in_footer );
    	// deregister standard jquery
    	// loads modernizr script, local path, no dependency, no version, loads in header
    	wp_enqueue_script('modernizr-js', get_bloginfo('stylesheet_directory') . '/js/modernizr.js', false, '2.0.6');
    	// loads latest jqery script, from google cdn url, no dependency, yes version, loads in footer
        wp_enqueue_script('jquery', (""), false, '1.7.1', true);
    	// loads dropdowns script, local path, yes dependency is jquery, no version, loads in footer
    	wp_enqueue_script('superfish-dropdowns-js', get_bloginfo('stylesheet_directory') . '/js/superfish-dropdowns.js', array('jquery'), false, true);
    //	wp_enqueue_script('hoverintent-js', get_bloginfo('stylesheet_directory') . '/js/hoverIntent.js', array('jquery'), false, true);
    //	wp_enqueue_script('superfish-js', get_bloginfo('stylesheet_directory') . '/js/superfish.js', array('jquery'), false, true);
    //	wp_enqueue_script('supersubs-js', get_bloginfo('stylesheet_directory') . '/js/supersubs.js', array('jquery'), false, true);
    //	wp_enqueue_script('thematic-dropdowns-js', get_bloginfo('stylesheet_directory') . '/js/thematic-dropdowns.js', array('jquery'), false, true);
    add_action('wp_enqueue_scripts', 'childtheme_script_manager');

    It is commented, so you should be able to figure out what is going on, except for maybe the dropdown scripts section. Through searching I had found Kathy had a post on this already (figures), so no point in reinventing the wheel on this one, if you want to combine them, visit

    The only thing I did differently was used the override instead.

    function childtheme_override_head_scripts() {
    	// silence

    Curious if anyone has anything to add/suggest to improve anything, just after a bunch of layouts, this is what I finally came up with for cleaner and more modern looking code. I know this is a band-aid to a much larger problem, but works for now.

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.