Codeable info

WordPress Cross Browser Compatibility

Posted on by in WordPress Tutorials

If you are a WordPress developer, you have surely fought with WordPress cross-browser compatibility issues. In this tutorial I will show you how to overcome many of the common issues that arise with some of the more common web browsers and devices while working with WordPress. This tutorial is aimed at more advanced WordPress users. Common users are not likely to run into nearly as many cross-browser compatibility issues due to the fact that these issues are dealt with in the WordPress core. More advanced WordPress users who develop custom themes, templates and/or plugins are very likely to run into many cross-browser compatibility issues however because they work within the core to develop more customized WordPress sites.

Browser detection in WordPress using JavaScript

As with any other website, you can use a few simple lines of JavaScript to determine what browser your users are viewing your blog in and customize the code as needed according to the browser they are using. With WordPress, it is crucial to place your JavaScript code in the correct areas though, so let’s look at how that can be done. The code below shows you exactly how to detect some of the more common browsers. The place to put the code is in the header file of the page or post you want to modify. In our case, we are modifying the index.php script, so the header file for that script is simply header.php. Here is the code:

var isOpera = !!(window.opera && window.opera.version);  //Check for Opera 8.0+
var isIE = [email protected]_on!@*/false || testCSS('msTransform');  // See if At least IE6
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;//check for safari
var isChrome = !isSafari && testCSS('WebkitTransform');  //check for chrome
if(navigator.product == 'Gecko'){var isFF=true;}// check for FireFox

The above JavaScript would be placed in the head section of header.php in between script tags. It checks for several of the most common browsers used today which are Opera, Internet Explorer, Safari, Chrome and of course FireFox, my particular favorite. Notice instead of using a single technique like the navigator object, we used what I have found works best for detecting each browser. This is the code I use for more complex sites and clients who want their customized WordPress blog to look perfect in all popular browsers.

Mobile Phone and other device detection for WordPress

The way I normally go about checking for mobile phones and other devices in WordPress is very similar to the method I use for browser detection. the code also goes in the header file after the opening head tag. I like to place it towards the top directly after my browser detection code. Here is what I use:

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
};

Using the above code is fairly simple. To see if the user is on any mobile device use this:

if( isMobile.any() ) {alert('Mobile Device');}

To check if user is on a BlackBerry:

if( isMobile.BlackBerry() ) alert('BlackBerry');

To see if user is using an iPhone or iPad:

if( isMobile.iOS() ) alert('iOS');

To check for IE Mobile devices:

if( isMobile.IEMobile() ) alert('IEMobile');

Finally, to see if the user is on an android phone:

if( isMobile.Android() ) alert('Android');

There you have it! Not too difficult even for the novice, learning WordPress guru. Just replace the alert with whatever code you need to implement for each device and you are all set.

Using JavaScript to Implement Browser or Device Specific Code

Using JavaScript to control what the user experiences according to the browser or device is simple. First you need to find the corresponding JavaScript object for the CSS attribute you wish to alter for a specific browser. Here are some of the common CSS styles you would normally change with JavaScript:

document.getElementById('divID').style.top="45px";
document.getElementById('divID').style.marginRight="-14px";
document.getElementById('divID').style.height="200px";
document.getElementById('divID').style.width="300px";

With the above JavaScript snippets you can change specific styles for a div or other element according to the element’s id. Often in WordPress, you will come across class names that you will want to alter the style of. Here is a piece of JavaScript code I use for just that:

var table_array = document.getElementsByClassName('maintd');//array of main tables
var table_cnt = table_array.length;
//loop thru table_array and set width of ea.:
	for(i=0;i < table_cnt; i++) {
	table_array[i].style.width="100%";
	}//end for loop.

In the above example we grab a variable number of table elements from within the WordPress loop using their class name. We then loop through the array of tables and dynamically change the width of each. This is just one example of browser or device specific changes you might need to implement while customizing a WordPress blog to suit you or your client’s needs. The same strategy can be used for an array of divs or any other element that has a class name and more than one instance on the page.

Using Separate Style Sheets for Different Browsers or Devices:

All of the examples in this tutorial so far have explained how to fix cross-browser compatibility issues with pure JavaScript. In this section, we are going to show you how to use mostly CSS to solve cross-browser compatibility issues. We will also use a little JavaScript to tell the browser which CSS style sheet to use. This technique involves writing separate style sheets for each browser or device of concern. You will use what you learned above in this tutorial for the JavaScript browser or device detection. Then simply include the proper CSS style sheet for each like in the following example:

<?php	
//if user is using a mobile device:
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')|| strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) {	
?>
<link id="changecss" rel="stylesheet" href="http://temp2.ihousedesign.com/temp/nickhall/blog/wp-content/themes/WTTF/style_for_ipad.css?t=<?php echo time(); ?>">	
<?php
}else{
?>	
<link id="changecss" rel="stylesheet" href="http://temp2.ihousedesign.com/temp/nickhall/blog/wp-content/themes/WTTF/style_for_ipad.css">
<?php
}
?>

In a nutshell, the above code uses the navigator object from JavaScript to see if the user is on a mobile device. It then shows one style sheet if they are and another if they are not. Pretty simple, right? You can expand on this using any of the browser and device detection techniques used in this tutorial to include style sheets for almost any browser or device you can imagine.

Summary

You should now have a very good idea of how to solve many cross-browser compatibility issues in WordPress. These techniques are not limited to WordPress either. They can be used for any website where you use JavaScript and CSS. The one thing to remember when using the techniques with WordPress, is where to include the JavaScript and style sheets. The files you will be using will include header.php and other header files plus the style.css file and any other style sheets you add. Start by copying your theme’s style.css file and alter it for devices and other browsers. Then you can include them as necessary for each device and browser you are having issues with. Have fun working out your cross-browser compatibility issues and I hope this tutorial has helped you figure our your unique issues. Also, start with Firefox as it is a standards complaint browser. Then you can tweak your styles for the other browsers out there. Of course I know some of you have strong opinions about what browser is best, so I’ll leave that up to you.

Comments Closed

Codeable info