Serve a different WordPress theme to mobile visitors

While developing the new Blueclaw Ecommerce site we decided that in order to showcase our skills with mobile websites we better make this site accessible via mobile devices. One approach would be to serve the same HTML with CSS styling targeted at a mobile device, however with mobile browsing speeds still not living up to the promises the operators like to make it is important to slim down the pages being served to improve loading times. So I set about finding a way to serve up a separate wordpress theme to mobile usersin order that we can fully optimise the HTML and styling to give a better all round mobile experience. The best part about it is that there are no redirects, no mobile subdomains, just the same pages being served up in a template that is better suited to mobile viewing.

After searching around the web I found this handy PHP mobile device detector script that takes all the hassle out of device sniffing for you. Simply drop that file into your wp-includes folder then add this to the functions.php in your current theme, replacing the “blueclawmobile” with the name of your mobile theme.

function filter_switchTheme($theme)
{
	include_once(ABSPATH . WPINC . '/mobile_device_detect.php');
	$mobile = mobile_device_detect();
	if ($mobile==true)
	{
		$theme = 'blueclawmobile';
	}
	return $theme;
}

add_filter('template', filter_switchTheme);
add_filter('option_template', filter_switchTheme);
add_filter('option_stylesheet', filter_switchTheme);

How easy was that? Now all you have to do is ensure that the theme you are serving up to the mobile visitors displays fine across the plefora of different mobile phones, tablets and other mobile devices, which might not be such a breeze.