Conditional CSS for IE

Applies to Version(s): Thesis 1

Two methods for applying IE-specific styles.

Add Custom Classes to the Body Tag

Place this code in custom_functions.php:

function add_ie_classes($classes) {
  $browser = $_SERVER['HTTP_USER_AGENT'];
  if (preg_match("/MSIE/", $browser)) {
  $classes[] .= 'ie';
    if (preg_match("/MSIE 6.0/", $browser))
	  $classes[] .= 'ie6';
    elseif (preg_match("/MSIE 7.0/", $browser))
	  $classes[] .= 'ie7';
    elseif (preg_match("/MSIE 8.0/", $browser))
	  $classes[] .= 'ie8';
  }
  return $classes;
}

add_filter('thesis_body_classes', 'add_ie_classes');

Note that if you’re using caching plugins, this method may not be ideal.

Add a Custom IE Stylesheet to Head Section

Create a stylesheet (named iestyles.css in this example) in your Thesis custom folder to hold your IE-only styles; and then place this code in custom_functions.php:

function add_ie_css() {
  $sheet = get_bloginfo('template_url') . '/custom/iestyles.css';
  echo "\n";
  echo '<!--[if lte IE 8]><link rel="stylesheet" href="' . $sheet . '" type="text/css" media="screen, projection" /><![endif]-->';
}

add_action('wp_head','add_ie_css');

Note: By placing iestyles.css in the custom folder, it will also become editable using the Thesis Custom File Editor.