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!







