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.
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.
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:
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:
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:
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 altering 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 out your unique issues. Also, start with Firefox as it is a standards-compliant 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.
