Serve IE6 Visitors the Default WordPress Theme

Internet ExplorerIt’s been talked about time and time again … what do we do about the IE6 problem?

Of course, there are a couple of options already available to you: you can make IE6 crash when users visit, you can move on to bigger and better things and ignore IE6 altogether, or you can do like I do and display a little message to IE6 visitors encouraging them to upgrade (this plugin makes that pretty easy).

But, if you’re not in the business of pandering to inferior browsers, but you don’t necessarily want to be seen as a jerk, I have a solution that might work out perfectly for you.

Let’s Do Some Browser Detection

True, it’s not perfect. But as we’ve pointed out before, browser detection can go a long way towards delivering a smooth experience for users of all browsers.

What we want to do is detect the visitor’s “User Agent”, then tell WordPress to use the default theme (that is, the Kubrick theme) whenever an IE6 user visits our site. So, we do a little PHP magic to detect the User Agent.

if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false) {
	// do something
}

This IF statement will evaluate whether or not the user’s browser is reporting IE6 as the User Agent. It should be noted that some browsers allow users to spoof their User Agent. So it is theoretically possible that someone is spoofing an IE6 User Agent and forgot to switch back. Possible, but very unlikely.

Tell WordPress to Use the Default Theme

So, now that we know whether or not the visitor is using IE6, we need to tell WordPress do something with that information. Fortunately, WordPress offers some filters for us to use. The code looks something like this (including the browser check from above):

add_filter('template', 'serve_default_to_iesix');
add_filter('option_template', 'serve_default_to_iesix');
add_filter('option_stylesheet', 'serve_default_to_iesix');
function serve_default_to_iesix($theme) {
	if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false)
		$theme = 'default';

	return $theme;
}

Making the Plugin

Because this bit of functionality is used to determine which theme gets loaded, this is one of the few things that you can’t do using your theme’s functions.php file … you have to actually use a plugin. But no worries … here’s exactly what the plugin code should look like:

<?php
/*
Plugin Name: Serve Default to IE6
Plugin URI: http://www.nathanrice.net/blog/serve-ie6-visitors-the-default-wordpress-theme
Description: This plugin will serve the default theme to any visitors using IE6.
Author: Nathan Rice
Author URI: http://www.nathanrice.net/
Version: 1.0
*/

add_filter('template', 'serve_default_to_iesix');
add_filter('option_template', 'serve_default_to_iesix');
add_filter('option_stylesheet', 'serve_default_to_iesix');
function serve_default_to_iesix($theme) {
	if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false)
		$theme = 'default';

	return $theme;
}
?>

And if you aren’t the best “copy and paste”-er, here’s a download link. Just upload the plugin and activate, and you’re good to go.

Please note that, because this functionality relies on dynamic template serving, it will be incompatible with plugins like WP-Super-Cache.

There you go! Now, whenever someone visits with IE6, they’ll be seeing your site courtesy of the Default theme. But you don’t have to stop there … if there is another theme in your wp-content/themes directory that you’d like to use instead of the default theme, just find its directory/folder name and replace ‘default’ with the directory/folder name of the other theme you’d like to use (case sensitive). For instance, if you’d like to use the “classic” theme, you’d modify the code above like so:

...
	if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false)
		$theme = 'classic';
...

Pretty cool, eh?

Comments

  1. says

    Cool indeed! Please keep publishing such great articles, with original and useful content! This blog is slowly beginning to be like a gold mine for WordPress users!

  2. says

    Awesome stuff! It’s still browser detection, but integrated into WordPress very nicely. Also, not sure about serving the Default theme (I want to put my best foot forward for all visitors), but it would be easy enough for someone to create a decent-looking alternate theme for the IE6 folks.

    • says

      @Jeff,
      Most definitely! The default theme is just a good place to start. But I’m with you, definitely don’t want to do anything to turn IE6 users away. A solid, but maybe minimalistic theme would definitely be the ticket.

  3. says

    Very nice solution. A lot smarter than the dumb “make IE6 crash” (never forget that some people, mostly in corporate environment, *have* to use IE6)

  4. says

    @Nathan — fun trick. Thanks for the walkthrough.

    @Ozh Very true — forcing IE6 crashes is sometimes punishment against those who can’t do anything about it (my company’s standard image requires IE6).

    @All In general, I wouldn’t invest alot of time trying to accomodate IE6 (or unaccomodate it, I should say). Besides that browser, there are always other browsers which won’t play nice with your themes, and at some point they just have to be left behind while you progress with the mainstream browsers.

  5. says

    I think this is a great idea! I might even think about creating an IE6 wordpress theme based on this idea of a Universal Internet Explorer 6 stylesheet. http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css

    demo of the Universal Internet Explorer 6 stylesheet: http://stuffandnonsense.co.uk/content/demo/2009/05/21/forabeautifulweb.html

    its just a simple look with beautiful typography, and can easily be tweaked to add in some of your own sites branding.

  6. says

    Hey Nathan, stumbled this way via the WP Recipes blog. Not really sure why I was reading that one, but glad it got me here to your site. Have subscribed to your stuff. Just from this example, it’s clear you know your stuff.

    One thing that you didn’t address, however, that I just discovered? This plugin doesn’t play so nicely if the site owner is running Super Cache (or likely any other caching plugins). Well, it does “work” however, not the way intended.

    I have WP-SuperCache set to only cache non-logged in visitors. So, if someone with IE 6 visits the site first, yay! the plugin will show them the Default (or whichever theme one chooses). Unfortunately, that is the page which gets cached, and now every other non-logged in visitor gets to see the default theme, regardless of the browser they are using.

    So, just a bit of warning to those that might be caching. This plugin works exactly as Nathan plans, but won’t allow for your caching to work the way you hope it will!

    Keep up the great work, Nathan. I’m subscribing to your feed, NOW!

    • says

      @James,
      Actually, if you scan through the article and look for the yellow alert box, I did mention that this method was incompatible with caching plugins. So hopefully people caught that and don’t ruin the experience for all their visitors :-)

  7. says

    Oh, you just put that alert box in there Nathan! Didn’t you? Really?

    Just kidding, I’m sure I glossed right over it. Please forgive my ignorance. Feel free to delete my comment! It obviously is a bad comment. Bad, bad, bad comment ;)

    Thanks for the quick reply. People should know that you’re right on top of things.

    Cheers!

  8. says

    Hey Nathan –

    I love this solution for dealing with IE6 and can hardly wait to implement it on a site I’m doing, except I keep getting an error message. Specifically:

    Fatal error: Cannot redeclare serve_default_to_iesix() (previously declared in /netapp/whnas-peewee/s8/s8/01296/www.myserver.com/webdocs/wordpress/wp-content/plugins/default-for-ie6.php:14) in /netapp/whnas-peewee/s8/s8/01296/www.myserver.com/webdocs/wordpress/wp-content/plugins/default-for-ie6.php on line 19

    I turned off all my plugins but that didn’t help, and I’m not using SuperCache. I tried using both your download and cutting and pasting the code from above (exactly the same, of course, but what the heck). Any advice?

  9. says

    Nathan – for some reason, the default theme is being served for IE8, as well, which doesn’t seem correct.
    Has anyone else ever mentioned this?
    I’m seeing your site in IE8, and getting the default theme right now…
    Is there something wrong with this:
    if(strpos($_SERVER['HTTP_USER_AGENT'], ‘MSIE 6′) !== false)
    ?

  10. says

    THis is a great idea! I actually cant believe that people are still using IE6, but poeople to need to upgrade. Either that, or get firefox haha

  11. says

    This may be fine for a personal blog. I definitely would not do this if you’re at all concerned with your brand, building a community,or e-commerce. Why drive away customers? Most people using IE6 are corporate users who don’t have a choice. Don’t expect them to return after serving them the default theme.

  12. says

    great work.or we can make the default theme bit like proper theme we want to use but with small width. if i manage to make the width 900 to 940 i can make it beautiful in ie6.so for my all themes look as good in ie6 as in firefox.touchwood.

  13. says

    Hiya, you havent said where I add the coding text to do this, I’m not so knowledged in coding to know which .php file I need to modify, could you say which ones?

  14. says

    hi all,
    might share this too. if you have a theme with transparent pngs or css stuff that doesn’t work with IE6 or below but you don’t want to switch completely to the default theme but rather apply some IE6 tweaks to your theme’s css and images then you might be interested in this little hack.
    it describes how to use the ‘stylesheet’ filter to point to another style.css. so you can add an IE6 subdirectory to your theme and point there if it’s an IE6 visitor.