Back to Top

Enqueue Style Sheets with Conditional Statements

Previous Post:

Enqueue Style Sheets with Conditional Statements

Have you ever needed the ability to add a conditional style sheet using WordPress’s enqueuing system? You know, to deal with the dreadful Internet Explorer 6?

The popular function wp_enqueue_style() doesn’t allow you to do this at all but the core WordPress actually has that feature. You will be able to add something like this:

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />

to your theme’s header. To make that happen, in the main function you use to enqueue your style sheets, for example bwp_enqueue_styles(), just add this when enqueuing ie-only.css:

function bwp_enqueue_styles()
	global $wp_styles;
	// other style sheets...
	// ie-only style sheets
	wp_register_style('all-ie-only', get_bloginfo('stylesheet_directory') . '/css/ie-only.css');
	$wp_styles->add_data('all-ie-only', 'conditional', 'IE');

Please note the use of get_bloginfo()1 and wp_register_style()2 to properly enqueue your style sheet.

Now if you look at the <head> section of your website/blog you should see this:

<!--[if IE]>
<link rel='stylesheet' id='all-ie-only-css'  href='' type='text/css' media='all' />

Pretty neat!


  1. ... t_bloginfo []
  2. ... ster_style []
Print Article Trackback Trackback to this Article   Subscribe to Comments RSS Subscribe to Comments RSS

Speak Up Your Mind!

An asterisk (*) indicates a required field and must be filled.

  • Web page and e-mail addresses turn into links automatically.
  • Wrap codes in: <code lang=""></code> or <pre lang="" extra="">
  • Lines and paragraphs break automatically.

Next Post: