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

Question

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 1.9.19.4 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 Cancel reply