Mobile web and mobile web applications are both serious hit into the market nowadays. Even though Malaysia system is a bit slow, but the users are growing. With WordPress, there is not much you can do with mobile version, beside getting a plugin like WordPress mobile edition or a third party web app like mobify.

I am not keen with a list of plugins in my admin panel, so I found quite an useful snippet in a forum discussing how to automatic detect mobile browser and sent users to the mobile version . The snippet looks like this:

<?php

$mobile_browser = '0';

if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i',
    strtolower($_SERVER['HTTP_USER_AGENT']))){
    $mobile_browser++;
    }

if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or
    ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))){
    $mobile_browser++;
    }

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda','xda-');

if(in_array($mobile_ua,$mobile_agents)){
    $mobile_browser++;
    }
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
    $mobile_browser++;
    }
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
    $mobile_browser=0;
    }

if($mobile_browser>0){
   header('Location: http://YourSite.mobi/mobile');
   } else {
   header('Location: http://YourSite.mobi/pc');
   }

?>

While it will automatic redirect users to the mobile version, it can however not direct users to another URL but another style sheet too.

if($mobile_browser>0){
   echo "<link rel=\"stylesheet\" href=\""; echo bloginfo('stylesheet_directory'); echo "/mobile.css\" type=\"text/css\" media=\"handheld\" />";
   } else {
   echo "<link rel=\"stylesheet\" href=\""; echo bloginfo('stylesheet_directory'); echo "/screen.css\" type=\"text/css\" media=\"handheld\" />";
   }

WordPress theme need style.css. All the information about the theme should be within style.css too. So I only place information on style.css and the rest of my CSS will bne in screen.css.

In functions.php, create the auto detect function:

function mobile_screen() {
$mobile_browser = '0';

if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i',
  strtolower($_SERVER['HTTP_USER_AGENT']))){
  $mobile_browser++;
  }

if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or
  ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))){
  $mobile_browser++;
  }

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
  'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
  'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
  'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
  'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
  'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
  'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
  'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
  'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
  'wapr','webc','winw','winw','xda','xda-');

if (in_array($mobile_ua,$mobile_agents)) {$mobile_browser++;}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'OperaMini')>0) {$mobile_browser=0;}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {$mobile_browser=0;}

if($mobile_browser>0){
  echo "<link rel=\"stylesheet\" href=\""; echo bloginfo('stylesheet_directory'); echo "/mobile.css\" type=\"text/css\" media=\"handheld\" />";
  } else {
  echo "<link rel=\"stylesheet\" href=\""; echo bloginfo('stylesheet_directory'); echo "/screen.css\" type=\"text/css\" media=\"screen\" />";
  }
}

It is to be easy for front-end developing. For header.php, you’ll need to look for the function and display it:

<?php if (function_exists('mobile_screen') ) { mobile_screen(); } ?>

Do let me know if there is another easier way to do so, cause this is not a good way to implement as a mobile web yet. By the way, you can learn more about mobile web tips and technique here. Have fun!