WPTouch Detect Mobile Devices and Present Specific Theme

Like most others, I highly recommend using WPTouch. However, it’s built more to support blogs than other website formats, so I know it’s not the panacea of mobile solutions (I run my portfolio on WordPress as well as my blog, and my portfolio looks like **** in WPTouch).

So I did take a look at the code to find the relevant portions that you’d need to use to replicate the mobile browser detection. Firstly, as mentioned by Jan Fabry, is a list of mobile browser user agents. WPTouch includes a default list, but also allows you to add custom user agents with a setting or with a filter called wptouch_user_agents:

The meat of the plugin, though, is a class:

The plugin’s constructor (function WPtouchPlugin()) first adds an action to the plugins_loaded hook to detect the mobile browser’s user agent and set $applemobile to true. Here’s the specific function:

Now the plugin knows you’re using a mobile browser (according to the browser’s user agent). The next meaty part of the plugin is a set of filters:

Each of these filters calls a method that checks whether or not $applemoble is set to true. If it is, then WordPress will use your mobile stylesheet, your mobile theme, and a mobile post/page template instead of the default ones for your theme. Basically, you’re overriding WordPress’ default behavior based on whether or not the browser being used has a user agent that matches your list of “mobile browsers.”

WPTouch also includes the ability to turn off the mobile theme – when you visit a WPTouch site on an iPhone, there’s a button at the bottom that allows you to view the site normally. You might want to consider this as you build your own solution.

Leave a Reply

Your email address will not be published. Required fields are marked *