The huge array of plugins available for WordPress is one of it’s most appealing aspects. Unfortunately not all are cross-browser compatible especially with older versions of Internet Explorer.
CSS can fix most visual problems however sometimes the javascript used by a plugin throws up an ugly error message, a common one in IE6 & IE7 versions is: “An error has occurred with a script on this page”. It prompts the user to choose whether to stop running all scripts or not.
The scenario…
You have just installed a brand spanking new plugin, everything looks great but then you decide to do some cross-browser compatibility checks. Lo and behold the older IE versions start spewing out error messages. Your options are:
- Ditch the plugin.
- Try and debug the error… but the chances are it will take a while and fixing it may limit the functionality of the script.
- Keep the plugin and curse the people still using IE6 or IE7 anyway.
- Display a friendly alternative to your widget to the users of older browsers, yet still keep the entire functionality of the widget for everyone else.
Thankfully by using a PHP browser detect plugin, it’s very easy to target specific browser versions in WordPress. I believe WordPress already has an inbuilt browser detect functionality, but unfortunately it only seems to be able to detect browser type and not version, e.g it can detect whether the browser is IE or Firefox, but not if its IE6 or IE8.
The solution…
Install the PHP Browser Detection plugin (Developed by Marty Thornley). Open up your sidebar or other template file containing the widgetized area, and edit the call to grab the widget. You current markup might be:
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar
('widgetarea1')) : else : ?>
<div class="pre-widget">
<p><strong>Widgetized area 1</strong></p>
<p>This panel is active and ready for you to add some widgets via the
WP Admin</p>
</div>
<?php endif; ?>
This would display whatever widgets you place in your widget area 1 in the admin panel. To keep things simple for this process it would be advisable to only install one widget per area, so that each one can be specifically swapped out. Now to make a specifc browser version display a different widget you can use th following markup:
<?php if (is_lt_IE8()) : ?>
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar
('widgetarea1')) : else : ?>
<div class="pre-widget">
<p><strong>Widgetized area 1</strong></p>
<p>This panel is active and ready for you to add some widgets via the
WP Admin</p>
</div>
<?php endif; ?>
<?php else : ?>
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar
('widgetarea2')) : else : ?>
<div class="pre-widget">
<p><strong>Widgetized area 2</strong></p>
<p>This panel is active and ready for you to add some widgets via the
WP Admin</p>
</div>
<?php endif; ?>
<?php endif; ?>
Using the code <?php if (is_lt_IE8()) : ?> all users of IE versions older than IE8 will see the widget displayed in the widget area 2, and all other browsers will see the widget you place in area1. You can choose a nice compatible version of the widget to display to the older browsers whilst retaining the full functionality for modern browsers. You don’t even need to replace it with another widget you could simply place some other content there.
Of course your not just limited to targeting just browsers later than IE8, you can use <?php if ( is_IE6() ) { alternative content here }; ?> to target just IE6 for example, or you can even target mobile specific browsers e.g <?php if ( is_iphone($version) ) { alternative content here }; ?> will target iphones only. For a full list see the plugin page.
If you only have one widget area and need to add more for this simply add more dynamic sidebars to your functions.php file:
register_sidebar(array( 'name' => 'widgetarea2', 'id' => 'widgetarea2', 'description' => 'This is the widgetized area2.', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>' ));
Once done you can rest assured that all visitors to your website regardless of browser still receive a fulfilling experience free of glitches and error messages.