How to detect mobile devices and present them a specific theme?

I would like to create a new modified version of my theme (check my profile if needed) to present to visitors if I detect that they are visiting the site from a hand-held device, like iPhone, Android, etc.

  1. How to detect if the request is coming from a mobile device/browser?
  2. How can I load and present them a dedicated theme?

More Info: My theme is not fluid. It has a fixed width of about 976px (676px content + rest is left sidebar). I do not want to revolutionize the theme but I feel it is to large for 320×480 and 800×480 phones. Probably I will remove the sidebar or at least move it to right and do other small adjustments.


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:

function bnc_wptouch_get_user_agents() {
    $useragents = array(           
        "iPhone",                                // Apple iPhone
        "iPod",                                  // Apple iPod touch
        "Android",                               // 1.5+ Android
        "dream",                                 // Pre 1.5 Android
        "CUPCAKE",                               // 1.5+ Android
        "blackberry9500",                        // Storm
        "blackberry9530",                        // Storm
        "blackberry9520",                        // Storm v2
        "blackberry9550",                        // Storm v2
        "blackberry9800",                        // Torch
        "webOS",                                 // Palm Pre Experimental
        "incognito",                             // Other iPhone browser
        "webmate",                               // Other iPhone browser
        "s8000",                                 // Samsung Dolphin browser
        "bada"                                   // Samsung Dolphin browser

    $settings = bnc_wptouch_get_settings();
    if ( isset( $settings['custom-user-agents'] ) ) {
        foreach( $settings['custom-user-agents'] as $agent ) {
            if ( !strlen( $agent ) ) continue;

            $useragents[] = $agent; 

    asort( $useragents );

    // WPtouch User Agent Filter
    $useragents = apply_filters( 'wptouch_user_agents', $useragents );

    return $useragents;

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

class WPtouchPlugin {
    var $applemobile;
    var $desired_view;
    var $output_started;
    var $prowl_output;
    var $prowl_success;


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:

function detectAppleMobile($query = '') {
    $container = $_SERVER['HTTP_USER_AGENT'];

    $this->applemobile = false;
    $useragents = bnc_wptouch_get_user_agents();
    $devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
    foreach ( $useragents as $useragent ) {
        if ( preg_match( "#$useragent#i", $container ) || file_exists( $devfile ) ) {
            $this->applemobile = true;

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:

if ( strpos( $_SERVER['REQUEST_URI'], '/wp-admin' ) === false ) {
    add_filter( 'stylesheet', array(&$this, 'get_stylesheet') );
    add_filter( 'theme_root', array(&$this, 'theme_root') );
    add_filter( 'theme_root_uri', array(&$this, 'theme_root_uri') );
    add_filter( 'template', array(&$this, 'get_template') );       

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.

Disclaimer: All of the above code was copied out of the source for WPTouch version and is protected under the GPL. If you re-use the code, your system must also comply with the terms of the GPL. I did not write this code.

Leave a Comment