How to Create  CSS conditional style sheets  for Internet Explorer in WordPress using a child theme or parent theme.

Either manually in the header.php file or the preferred WordPress way registered and enqueued as a style via the functions.php way.

The Manual Header Way

1) Open the header.php to your parent or child theme

2) Edit the file and go where the CSS styles are  before the closing </head> tag – here you are going to insert an Internet Explorer conditional style based on the IE version. Load the conditional styles after the other CSS styles.

Notes on the code

The source of the style sheet is given by the href attribute:

href="/css/all-ie.css"

The <?php echo get_stylesheet_directory_uri(); ?> followed by the css path is preferred as the better way to declare the theme location rather than use the absolute URL like:

http://mydomain.com/wp-content/mytheme/css/all-ie.css

The get_stylesheet_directory_uri(); function is used to point to the child theme root location – if you are altering a parent master theme then swap in the  get_template_directory_uri(); function instead to point to the parent theme location.

Target all IE versions using Child Theme

	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/all-ie.css" />
	<![endif]-->

view raw allie.html hosted with by GitHub

This examples targets all IE using Parent Theme – rest of examples below use Child Theme

Target all IE versions using Parent Theme

	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/all-ie.css" />
	<![endif]-->

view raw allie.html hosted with by GitHub

This examples targets all IE using Parent Theme – rest of examples below use Child Theme

Target Specific IE version

	<!--[if IE 8]>
	<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ie-8.css" />
	<![endif]-->

view raw ie8.html hosted with by GitHub

This example uses IE8 as an example. Just swap in the IE version number to suit.

Target IE Version & Lower

	<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ie-8andlower.css" />
	<![endif]-->

view raw ie8andlower.html hosted with by GitHub

This example uses targets version 8 and lower, lte=lower than and equal

Target IE Lower

	<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ie-7andlower.css" />
	<![endif]-->

view raw ie7lower.html hosted with by GitHub

This example uses targets version 7 and lower, lt=lower than but not equal (oh the subtlety)

Target IE Version & Higher

	<!--[if gte IE 9]>
	<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ie-9andhigher.css" />
	<![endif]-->

view raw ie9higher.html hosted with by GitHub

This example uses targets version 9 and higher, gte=greater than and equal

Target IE Higher

	<!--[if gt IE 8]>
	<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ie-9andhigher.css" />
	<![endif]-->

view raw ie9.html hosted with by GitHub

This example uses targets version 9 and higher, gt=greater than  but not equal

You will also likely find that a parent theme already has IE conditional style sheets already set up – check the header.php for the script tag and where the CSS file path is – if this is the case simply locate the CSS file and add in your IE style rules. IE versions above 10 do not support conditional stylesheets.

The other way to do this is by using the register and enqueue method but with the conditional tags there is a bit more code – check this.