Different WordPress Themes For Different Browsers

It’s going to happen. As you struggle to make sure the latest craptastic release of Internet Explorer doesn’t further send Web standards straight to hell, you find that your perfect theme isn’t going to work with the older release of said browser. And yes, I have been here myself, trust me, I dislike Internet Explorer with every fiber of my being and make no apologies for it. Yes, IE9 is finally making the kind of headway IE should have years ago. Too little, too late in my book.

This is not to say that Firefox or Chrome are a basket of wonders on all days, but by far I have never experienced the level of inconsistencies from release to release as with IE. Okay, enough griping, let me share one solution that has worked well for me.

Because I have little personal interest in what IE users see from a template perspective, when it comes to WordPress templates, I tend to send them to something relatively generic looking. How do I do this? Not too long back I found an interesting plugin called Serve Default to IE6. It’s designed to serve those running IE6 to the default WordPress template.

Now here is where I made it work for me. Taking the existing template, I made the following changes:

Name change – Plugin Name: Serve Default to IE7 (it starts out as IE6)

Code changes -
add_filter('template', 'serve_default_to_ieseven');
add_filter('option_template', 'serve_default_to_ieseven');
add_filter('option_stylesheet', 'serve_default_to_ieseven');
function serve_default_to_ieseven($theme) {
if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7.0') !== false)

(In each above case, iesix was changed to ieseven; you can also change the user agent to whatever you wish)

$theme = 'default';
changed to
$theme = 'template of my choice';

You can see how helpful it can be to make the browser usage agents work for you.

For me, it was IE6-7 that created the most headaches. IE8+ were fine. But rest assure, if a future revision of IE or any other browser creates a problem rendering properly for me, I have a choice instead of having to forced everyone to use the same basic template in WordPress.

Different WordPress Themes For Different Browsers
Photo by 4_EveR_YounG

FAQ

Does it work with Hypercache? Yes, if you make Hypercache block, the user agent being sent to the other template above.

How does one redirect more than one user agent? Install two of the same plugins, with different file names and different names under Name in the plugin itself. This way WordPress can activate both plugins.

Article Written by

  • http://eddieringle.com Eddie Ringle

    All you really had to change was the line that matches the user agent, the add_filter calls don’t actually determine whether or not it picks IE7 or not. ;)

    This plugin could be further improved with an admin page that lets you select the various user agents you want to serve the default theme to. Then the code would just loop through each of the user’s choices.

    If I had the free time I’d probably write this plugin myself, but alas, I’m caught up in Android development. :)

  • http://lucasyas.tk Lukasz Jasinski

    Eddie, you’re absolutely right. It’s fine that there’s a way of achieving it through plugin, but I wouldn’t use that on client’s site. When I find some free time, I’m gonna think about the ‘elegant’ version of the plugin, perhaps with some predefined user agent strings.
    Don’t get me wrong. From my personal point of view, I’m not irritated with IE so much. If someone uses IE, he probably won’t visit my blog anyway. I just want to think about my client’s sites and… my mobile visitors. Simple template for android / iphone / windows mobile and whatever they had or will think off. That would be something ;-)