WordPress: use different CSS for IE 6 or lower

here’s a really easy hack how you can make your theme multi-browser capable, especially old IE6 needs sometimes other images and styles.

so i thought i might share it:

there’s a filter hook available that returns the directory to the stylesheet, relative to wp-content/themes. a prerequisite is that you set up a subdirectory in your theme’s directory with the IE6 stuff, i.e. style.css and images or whatever else you have. Then you can place something like this in your theme’s functions.php:

add_filter('stylesheet', 'css_switcher');
function css_switcher() {
  //browser check:
  $userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
  if (preg_match('/msie/', $userAgent))
    if (preg_match('/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/', $userAgent, $matches))
      if ((int) $matches[1]<7) return 'yourtheme/ie6';
  return 'yourtheme';
}

you need to replace yourtheme with the name of your theme, i.e. with the name of the directory underneath wp-content/themes that stores your theme. i’m sure there’s a better way to get the name of the theme. but you get the idea.

the css_switcher function just returns the path of the style.css, if you have images in your style.css then they are likely in a directory in your themes directory, just copy the whole images directory into the new ie6 directory. at the end you would have a structure like this:

..../themes/yourtheme/style.css
                     /images/test.png
..../themes/yourtheme/ie6/style.css
                         /images/test.png

then you can edit your images in the ie6/images directory, i.e. remove alpha channels etc. and adjust the ie6/style.css to work with IE6.

Share this page

Tags:

2 Responses to “WordPress: use different CSS for IE 6 or lower”

  1. Gabriel says:

    Thanks a lot!

  2. Doesnt Work says:

    Doesn’t work. My stylesheet did not load in all browsers

Discussion...