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.