Overcoming Template-Browser Headaches With WordPress

Speaking as a guy who is anything but a Web designer, trying to get themes to play ball in every version of every browser can prove interesting. That said, generally speaking, WordPress themes tend to do okay here. Recently I was updating a blog for someone and discovered that it did strange things with the title of each post in Google Chrome. Not IE 6-8, Firefox, Opera, or Safari — just Chrome. Awesome.

Hours and hours into trying to adjust the stylesheet with browser specific versions, I finally had enough. The old theme worked great in Chrome; why not simply direct people to it? Being as I am not skilled enough to overcome this otherwise, bundled with the fact that most of the site’s visitors were not using Chrome, this made sense to me.

First stop was a plugin for WordPress designed for those who are dealing with issues when IE6 visitors stop by. Now obviously, this did me little good. So I did some tweaking so it would meet my needs. In the plugin itself, I located the lines:

if(strpos($_SERVER[‘HTTP_USER_AGENT’], ‘browser’) !== false)
$theme = ‘theme’;

I changed a few things around to appear as follows:

if(strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Chrome’) !== false)
$theme = ‘My Theme’s Title’;

Here is where it is a kicker- the theme title MUST be what it shows up as in the folder, not what you have it labeled as yourself. Also, because my issue affected all Chrome releases, not just some, I played a wildcard of sorts and just made the user agent Chrome.

I uploaded the adjusted plugin, but I was not ready to activate it. I needed to make some adjustments to my Hyper-cache plugin. Unlike other caching plugins for WordPress, Hyper-cache does not get all creative with your htaccess file. It’s just as good and it is a heck of a lot easier to work with.

So anyway, in the Hyper-cache plugin, I went into the settings and located “add Agents to reject” at the bottom. The user agent I told it to reject was Chrome. Keeping in mind that the old theme is still installed, but otherwise inactive, I made all of these changes with the new theme activated the entire time.

Now here is where the magic happened. I now activated the modified IE6 plugin, went back to the Hyper-cache settings, and cleared the cache.  Then just to make sure I was working with a clean slate on my end, I cleared the cache of all my own browsers as well… including Chrome. Now for the test. I opened up the site in Firefox, IE, and Opera. The new template came up. Awesome, now for the moment of truth. I opened up the site in Chrome, and boom, it opened up in the OLD template. It worked… I could hardly believe it. I tested this on multiple networks and with both Chrome Linux/Windows, in addition to Chromium on Linux as well. Apparently this works with any variation of Chrome.

Are there better ways of doing this? Sure, I am sure this can be done with JavaScript/stylesheet combos. But based on my “Googling around,” this was a lot easier and it left nothing to chance.

[awsbullet:how to wordpress]