Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Enqueueing IE conditional stylesheets in WordPress the right way
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
/**
* Example callback function that demonstrates how to properly enqueue conditional stylesheets in WordPress for IE.
* IE10 and up does not support conditional comments in standards mode.
*
* @uses wp_style_add_data() WordPress function to add the conditional data.
* @link https://developer.wordpress.org/reference/functions/wp_style_add_data/
* @link https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
*/
function enqueue_my_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]-->
*/
wp_enqueue_style( 'my-theme-ie', get_stylesheet_directory_uri() . "/css/ie.css", array( 'my-theme' ) );
wp_style_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_style_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_style_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_style_add_data( 'my-theme-ie', 'conditional', 'gt IE 8' );
}
@andrewtanner1987

This comment has been minimized.

Copy link

commented Feb 14, 2015

Works like a charm, cheers!

@engrmostafijur

This comment has been minimized.

Copy link

commented Apr 25, 2015

nice

@kabdessamad1

This comment has been minimized.

Copy link

commented Jun 19, 2015

😄 thnx

@bryanwillis

This comment has been minimized.

Copy link

commented Jan 13, 2016

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.

@earmin

This comment has been minimized.

Copy link

commented Jan 17, 2018

Dear bryanwillis, I am not a professional developer, so could you please explain a little more? Should I change "twentyfifteen-style" to another string if I'm using another theme? What "20141010" does?! Should I use Javascripts (/js/html5shiv.js) too?! I only want to show a Div for IE users and hide it from others. Here is my question in StackExchange and nobody replied it. https://goo.gl/1veQTo
Thanks in advanced

@Riazalmahmud

This comment has been minimized.

Copy link

commented Jan 11, 2019

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.