Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Enqueueing IE conditional stylesheets in WordPress the right way
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
function enqueue_my_styles() {
global $wp_styles;
// Load the main stylesheet
wp_enqueue_style( 'my-theme', get_stylesheet_uri() );
/**
* Load our IE-only stylesheet for all versions of IE:
* <!--[if IE]> ... <![endif]-->
*
* NOTE: It is also possible to just check and see if the $is_IE global in WordPress is set to true before
* calling the wp_enqueue_style() function. If you are trying to load a stylesheet for all browsers
* EXCEPT for IE, then you would HAVE to check the $is_IE global since WordPress doesn't have a way to
* properly handle non-IE conditional comments.
*/
wp_enqueue_style( 'my-theme-ie', get_stylesheet_directory_uri() . "/css/ie.css", array( 'my-theme' ) );
$wp_styles->add_data( 'my-theme-ie', 'conditional', 'IE' );
/**
* Load our IE version-specific stylesheet:
* <!--[if IE 7]> ... <![endif]-->
*/
wp_enqueue_style( 'my-theme-ie7', get_stylesheet_directory_uri() . "/css/ie7.css", array( 'my-theme' ) );
$wp_styles->add_data( 'my-theme-ie7', 'conditional', 'IE 7' );
/**
* Load our IE specific stylesheet for a range of older versions:
* <!--[if lt IE 9]> ... <![endif]-->
* <!--[if lte IE 8]> ... <![endif]-->
* NOTE: You can use the 'less than' or the 'less than or equal to' syntax here interchangeably.
*/
wp_enqueue_style( 'my-theme-old-ie', get_stylesheet_directory_uri() . "/css/old-ie.css", array( 'my-theme' ) );
$wp_styles->add_data( 'my-theme-old-ie', 'conditional', 'lt IE 9' );
/**
* Load our IE specific stylesheet for a range of newer versions:
* <!--[if gt IE 8]> ... <![endif]-->
* <!--[if gte IE 9]> ... <![endif]-->
* NOTE: You can use the 'greater than' or the 'greater than or equal to' syntax here interchangeably.
*/
wp_enqueue_style( 'my-theme-new-ie', get_stylesheet_directory_uri() . "/css/new-ie.css", array( 'my-theme' ) );
$wp_styles->add_data( 'my-theme-new-ie', 'conditional', 'gt IE 8' );
}
@andrewtanner1987

Works like a charm, cheers!

@engrmostafijur

nice

@kabdessamad1

😄 thnx

@bryanwillis

This needs to be updated - see this stackoverflow question for more details regarding this gist. You don't need to be accessing globals when there's wp_styles. There's a also a shortcut wp_style_add_data for wp_styles. This applies to wp_scripts as well which uses wp_script_add_data.

add_action( 'wp_enqueue_scripts', 'enqueue_my_styles_and_scripts' );
/**
 * Enqueue styles and scripts conditionally.
 *
 * Load stylesheets and scripts specifically for IE. IE10 and above does
 * not support conditional comments in standards mode.
 *
 * @link https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
 */
function enqueue_my_styles_and_scripts() {

    // Internet Explorer specific stylesheet.
    wp_enqueue_style( 'themename-ie', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'themename-ie', 'conditional', 'lte IE 9' );

    // Internet Explorer 7 specific stylesheet.
    wp_enqueue_style( 'themename-ie7', get_stylesheet_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'themename-ie7', 'conditional', 'lt IE 8' );

     // Internet Explorer HTML5 support 
    wp_enqueue_script( 'html5shiv',get_template_directory_uri().'/js/html5shiv.js', array(), '3.7.3', false);
    wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );

    // Internet Explorer 8 media query support
    wp_enqueue_script( 'respond', get_template_directory_uri().'/js/respond.js', array(), '1.4.2', false);
    wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );

}

Also, for the most part you shouldn't be using $is_IE ( thanks toscho ). If you don't send the HTTP header Vary: User-Agent now, you will send the wrong output to users behind a cache. So basically the cache will break for those users.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.