You are here: Home / WordPress / How to Conditionally Add Style Sheets for IE in WordPress

How to Conditionally Add Style Sheets for IE in WordPress

2011-02-26 by 5 Comments

Update: http://code.garyjones.co.uk/enqueued-style-sheet-extras/#ie

Over time, Internet Explorer (IE) is getting better at rendering web pages how we want them, but while IE7 and earlier versions still have a (fast-fading) grip, we sometimes still need to provide exclusive styles to make them render our sites in an acceptable way. That is where conditional style sheets are used.

Open up the functions.php file in your child theme and add the following code. The code should be entered at the end of the file, just before the closing ?> if there is one.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 
<?php
 
add_action( 'wp_print_styles', 'child_add_ie7_style_sheet', 200 );
/**
 * Enqueue a IE-specific style sheet (for all browsers).
 *
 * @author Gary Jones
 * @link http://code.garyjones.co.uk/ie-conditional-style-sheets-wordpress/
 */
function child_add_ie7_style_sheet() {
	
	wp_enqueue_style( 'ie7', get_stylesheet_directory_uri() . '/style-ie7.css', array(), '1.0' );
	
}
 
add_filter( 'style_loader_tag', 'child_make_ie7_style_sheet_conditional', 10, 2 );
/**
 * Add conditional comments around IE-specific style sheet link.
 *
 * @author Gary Jones & Michael Fields (@_mfields)
 * @link http://code.garyjones.co.uk/ie-conditional-style-sheets-wordpress/
 *
 * @param string $tag    Existing style sheet tag.
 * @param string $handle Name of the enqueued style sheet.
 * 
 * @return string Amended markup
 */
function child_make_ie7_style_sheet_conditional( $tag, $handle ) {
	
	if ( 'ie7' == $handle )
		$tag = '<!--[if lte IE 7]>' . "\n" . $tag . '<![endif]-->' . "\n";
	
	return $tag;
	
}
view raw functions.php This Gist brought to you by GitHub.

The first function enqueues a reference to a style sheet file called style-ie7.css in our child theme folder. Using the wp_enqueue_style() is the correct way of adding style sheet references, as amongst other reasons, it provides a handle that we end up using in the second function. We hook the function in with a priority of 200. This make sure it appears after any other style sheets that you or a plugin have added in.

The second function surrounds what will be the <link> markup with a conditional comment to target only browsers that are less than or equal to (the lte bit) IE7. Other conditional comments are available, but this is by far the most common approach, with IE6- and IE7-specific styles thrown into the same file, to avoid an extra HTTP request. Browsers which aren’t IE just see the output as one big comment and promptly ignore it.

Credit to Michael Fields for highlighting the script_loader_tag filter methodology to me.

Filed Under: WordPress

Comments

  1. gavsiu says:
    2012-08-07 at 08:56

    Is there a way to do this with scripts? I don’t think script_loader_tag exists even with WordPress 3.4.1. style_loader_tag works perfectly, though.

    Reply
    • Gary says:
      2012-08-07 at 09:21

      What is it you want to do with scripts? Just load them for IE?

      If so, you’d be better referencing the script for everyone, but check in the script itself for feature detection (rather than browser-sniffing).

      Reply
  2. gavsiu says:
    2012-08-07 at 13:09

    The script is the html5shiv. I’d rather wrap the link with IE conditional statements than have every browser load it. At the moment, I’ve just hard coded it instead of enqueing the script as a workaround.

    Reply
  3. Clare says:
    2013-01-02 at 17:46

    An alternate method for the conditional styles is to use $wp_styles:

    function enqueue_styles() {
    global $wp_styles;
    wp_register_style( $handle, $src, $deps, $ver, $media );
    wp_enqueue_style($handle);
    $wp_styles->add_data($handle, 'conditional', 'lt IE 9' );
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

    It doesn’t work on scripts though, or not as far as I know (and script_loader_tag still hasn’t been added to WP as of WP 3.5).

    Reply
    • Gary says:
      2013-01-02 at 21:09

      See the link at the top of this article – it already offers code similar to what you’ve suggested :-)

      Reply

Speak Your Mind

*