Loading Conditional Stylesheets In WordPress

Most developers will be familiar with conditional stylesheets such as the standard Internet Explorer conditional comments that allow you to load a stylesheet only in IE – a familiar site for IE5-10.

Fortunately browsers are adhering to standards more every iteration. Unfortunately we still have to support the bad ones:

<!--[if lt IE 9]>
    <link href="style.css" rel="stylesheet" type="text/css">
<![endif]-->

The quick and dirty method is to hardcode these into the header.php file of your WordPress theme just below the wp_head() function call. It works, but if your theme is a parent theme then it’s not really best practice.

Loading Styles

Loading conditional styles in WordPress is relatively straightforward, via code in your functions.php file. The stylesheets are placed in a css folder of your theme directory:

/**
 * Load custom & conditional styles
 */
function my_conditional_styles() {

    global $wp_styles;

    // Load our stylesheet for IE8
    wp_enqueue_style('ie8', get_stylesheet_directory_uri() . '/css/ie8.css', array('style'));
    $wp_styles->add_data( 'ie8', 'conditional', 'IE 8' );
    
    // Load our stylesheet for IE9
    wp_enqueue_style('ie9', get_stylesheet_directory_uri() . '/css/ie9.css', array('style'));
    $wp_styles->add_data( 'ie9', 'conditional', 'IE 9' );
}
add_action('wp_enqueue_scripts', 'my_conditional_styles'); 

Loading Scripts

Loading scripts pre-Wordpress 4.3 was a bit of a pain. Scripts are placed in a js folder of your theme directory:

// Load custom and conditional header scripts
function my_conditional_scripts() { 

    // Load our script for IE8
    printf( '<!--[if lt IE 9]><script src="%s"></script><![endif]-->', get_stylesheet_directory_uri() . '/js/html5shiv.min.js' );

    // Load our script for IE8
    printf( '<!--[if lt IE 9]><script src="%s"></script><![endif]-->', get_stylesheet_directory_uri() . '/js/respond.min.js' );
}
add_action('wp_head', 'my_conditional_scripts'); 

From WordPress 4.3 we now have access to a global variable wp_scripts, and so can use a similar method to the styles.

function my_conditional_scripts() { 

    global $wp_scripts;

    // Load our stylesheet for IE8
    wp_enqueue_script('shiv-min', get_template_directory_uri() . '/js/html5shiv.min.js', array(), NULL);
    $wp_scripts->add_data('shiv-min', 'conditional', 'lt IE 9');
    
    wp_enqueue_script('respond-min', get_template_directory_uri() . '/js/respond.min.js', array(), NULL);
    $wp_scripts->add_data('ie9', 'conditional', 'lt IE 9');
}
add_action('wp_head', 'my_conditional_scripts'); 

If your theme restricts usability to WordPress versions 4.3 or later then you can use the later method. If you still have to support earlier versions – for now anyway – then an amalgamated method, shown below, works:

function my_conditional_scripts() { 

    global $wp_version, $wp_scripts;

    // Solution until WP 4.2
    if (version_compare($wp_version, '4.3', '<')) { 
        // Load our script for IE8
        printf( '<!--[if lt IE 9]><script src="%s"></script><![endif]-->', get_stylesheet_directory_uri() . '/js/html5shiv.min.js' );

        // Load our script for IE8
        printf( '<!--[if lt IE 9]><script src="%s"></script><![endif]-->', get_stylesheet_directory_uri() . '/js/respond.min.js' );

        return;
    }

    // Load our stylesheet for IE8
    wp_enqueue_script('shiv-min', get_template_directory_uri() . '/js/html5shiv.min.js', array(), NULL);
    $wp_scripts->add_data('shiv-min', 'conditional', 'lt IE 9');
    
    // Load our stylesheet for IE8
    wp_enqueue_script('respond-min', get_template_directory_uri() . '/js/respond.min.js', array(), NULL);
    $wp_scripts->add_data('ie9', 'conditional', 'lt IE 9');
}
add_action('wp_head', 'my_conditional_scripts');