Loading IE Conditional Stylesheets in WordPress

Most web developers are familiar with the standard IE conditional comments that allow you to load a stylesheet only in Internet Explorer.  For example:

Many new WordPress developers / themers tend to just hardcode these conditional comments directly into their theme’s header.php file.  This approach might work well for one-off client themes, but it doesn’t work so well if your theme is used as a parent theme; which is typically the case with publicly released themes.

The correct way to load conditional stylesheets in WordPress is using the wp_enqueue_style() function.  For many WordPress developers, the use of this function is standard routine.  However, it isn’t readily obvious how to handle IE conditional comments using this method.  So, many developers will do something like this:

Provided that your callback doesn’t do anything else, this can provide a viable way for child themes to remove or override the loading of your conditional stylesheet.

Believe it or not, WordPress does have a built-in way to conditionally load IE specific stylesheets using the wp_enqueue_style() function that we know and love.  It just requires a little bit of extra code. Here is a code snippet that shows how you would properly load IE-specific stylesheets in a few different scenarios:

Note that the code above is using the get_stylesheet_directory_uri() function, which will get your theme’s root URL. In the event that a child theme is being used, this function will return the root URL for the child theme, not the parent theme. If you wish to always reference the parent theme URL, use get_template_directory_uri() instead.

Unfortunately, a similar solution to conditionally loading scripts in WordPress is currently not available.

  1. Thanks for posting this Micah. My three previous attempts from other blog posts failed. Your method is the only one that worked. Nice work my man 🙂

  2. Which version of the enqueue style do you use for an exact version of IE. All your functions use LT or GT in determining the version.

    1. The second example is how you would check for an exact version: ` $wp_styles->add_data( ‘my-theme-ie7’, ‘conditional’, ‘IE 7’ );`

  3. I’d like to accomplish something similar only have the CSS file loaded not based on the browser, but based on the domain name that the site is loaded from. (I have multiple domain-names pointing at the same site.) Any clue on how to look up the domain name from within WP?

    1. The easiest thing might be to have the host (domain name) in the name of the CSS file. That way you can read the `$_SERVER[‘HTTP_HOST’]` variable in PHP and dynamically formulate the name of the CSS file that should be loaded. Something like `wp_enqueue_style( ‘my-theme’, get_stylesheet_directory_uri() . ‘/css/global-‘. $_SERVER[‘HTTP_HOST’] .’.css’ );` would probably do the trick.

      However, you may want to reconsider having multiple domain names pointing at the same content. This is known as duplicate content in the SEO (Search Engine Optimization) world and can be an issue unless you implement canonical links… which then would make me wonder the need to have multiple domains point at the same site. There may be a good use case, but I just want to raise a red flag in case you aren’t aware of the implications.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Up Next:

Reorder Posts in WordPress Programatically

Reorder Posts in WordPress Programatically