I love a good framework. Just exploring different frameworks and trying them out for various purposes can teach you a lot. One of my side projects lately has been building my own WordPress theme framework, which uses Paul Irish’s HTML5 Boilerplate. Still, most of my projects and clients are using Thesis, which is a WordPress theme framework that does much of the heavy lifting in building custom sites. I’m on a mission to marry the two.

Conditional HTML Comments for Internet Explorer

The first thing you’ll notice looking at the source code of a site using HTML5 Boilerplate will be the css classes in the html tag using conditional html comments. This is pure win.

Most themes are written with the html easily available in template files. While I think this is pretty inefficient, it makes it easy to just paste in these conditionals. You can use this same technique with the WordPress body class, but you might be better off just using the HTML5 Boilerplate Plugin. Thesis is a horse of a different breed, so we need to tame it accordingly.

The issue with adding the conditional comments to Thesis, is that the html tag is hardcoded, meaning you’ve got to hack the core of Thesis to replace the tag with the conditional comments. That’s not a good solution.

Pwn Exploder with Thesis Body Classes

Note: This does not include the no-js class for Modernizr, which must be in the html tag. This is all to avoid the FOUC Monster. You’ll need to hack Thesis core to add the no-js class.

Though Thesis does not use WordPress’s native body classes, it has its own. Using the body class will have the same effect as the html classes, providing specificity that will override any styles.

To accomplish this, I’ve created a little function to insert the Internet Explorer classes into the body tag.

Use this function in Thesis:

function bp_conditional_ie_classes($classes)   {
    $ie_check = array();
    $ie_classes = array( 'ie7', 'ie8', 'ie9' );
    $version = 7;
    while ( $version < 10 ) {
        $ie_check[] = strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE ' . $version . '.') !== FALSE;
        ++$version;
    }
    foreach ( $ie_check as $key => $value  )    {
        if ( $value == 1 )  {
            $ie = $ie_classes[$key] . ' oldie';
        }
    }
    $classes[] = $ie;
    return $classes;
}
add_filter('thesis_body_classes','bp_conditional_ie_classes');

And this one for any WordPress theme that uses the body class function:

function bp_conditional_ie_classes($classes)   {
    $ie_check = array();
    $ie_classes = array( 'ie7', 'ie8', 'ie9' );
    $version = 7;
    while ( $version < 10 ) {
        $ie_check[] = strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE ' . $version . '.') !== FALSE;
        ++$version;
    }
    foreach ( $ie_check as $key => $value  )    {
        if ( $value == 1 )  {
            $ie = $ie_classes[$key] . ' oldie';
        }
    }
    $classes[] = $ie;
    return $classes;
}
add_filter('body_class','bp_conditional_ie_classes');

This is just the first step toward Boilerplating Thesis. There will be more posts to come, along with a review of the HTML5 Boilerplate Plugin.

It’s possible that you will have some caching issues using this technique, as it is doing the work server side and not in the HTML ( see Paul’s comment on server side ua sniffing ). However, I’ve tested it here using W3 Total Cache, and have had no problems so far. Please comment below if you do.