Mobile Friendly WordPress Development

A few months back I was searching for a good solution for optimizing a WordPress theme for mobile use. I didn’t find anything that great as far as plug-ins go, so I moved into searching for a simple php function that might work and I ran across this solution on mobiforge.com It did almost everything I wanted it to do. The algorithm used is fairly lightweight—the code is mostly based on a list of about 90 well-known mobile browser User-Agent string snippets, with a couple of special cases for Opera Mini, the W3C Default Delivery Context and some other Windows browsers. The code updates the header information and then redirects the user to a mobile version of the site. I wanted to modify this a little so that instead of redirecting a user to a new url, it would simply deliver different content or styles depending on what type of device they were using.

So, below is a very compact php mobile detection method. Of course this can be used on any php site, but I wanted to focus on implementing it with a WordPress theme. To start, include this in the functions.php or header.php file.

<?php 
function is_mobile() {
	$regex_match="/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";
	$regex_match.="htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|";
	$regex_match.="blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|";	
	$regex_match.="symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|";
	$regex_match.="jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220";
	$regex_match.=")/i";		
	return isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));
} ?>

Examples

Now, you can use this method to deliver any mobile specific content or styles. For example, if you wanted to use a different stylesheet on a mobile device you could do the following:

<link rel="stylesheet" type="text/css" media="all" href="
    <?php
    if(is_mobile()) { 
        //load mobile stylesheet
        echo "/css/mobile.css";
    } else {
        //load normal WP stylesheet
        echo bloginfo( 'stylesheet_url' );
    }?>
"/>

Another example would be if you wanted to show different content for mobile vs. desktop. This can easily be accomplished by using custom fields. We would set up two custom fields in our WordPress template, one for normal content and one for mobile. We would then use the same statement as above to show one or the other:

<?php
if(is_mobile()) { 
    //show mobile content
    echo  get_post_meta($post->ID, 'mobile-content', true);
} else {
    //show non-mobile content
    echo  get_post_meta($post->ID, 'content', true);
}?>

I hope this lightweight code can you help as it has been a great tool for me in developing mobile themes that can be easily managed by my clients via WordPress.