1. Detect for mobiles

You could do it by measuring screen size with JavaScript, but that’s probably not the most solid technique. It can also be done server side with PHP, check out this project for doing so. Using that code, you could use something like this at the top of your header.php file:

include('mobile_device_detect.php');
$mobile = mobile_device_detect();

if ($mobile==true) {
  // This is a mobile device
} else {
 // This is NOT a mobile device, it's a full-featured browser
}

2. Install the Theme Switch plugin

It is available here. This is a sweet plugin for a variety of reasons. I like using it for developing themes right on live sites. We’ll use it in a different application here though. What the plugin does is create special URLs for your site that activate different themes.

http://your-website.com/?theme=Your_Mobile_Theme

3. Combine

Now you can test for mobiles, then redirect to a special theme-switching URL to activate your mobile theme:

include('mobile_device_detect.php');
$mobile = mobile_device_detect();

if ($mobile==true) {
  header( 'Location: http://your-website.com/?theme=Your_Mobile_Theme' ) ;
} else {
 // Do nothing, regular browser.
}

© 2009 Digging into WordPress | Permalink | 23 comments | Add to del.icio.us | Post tags: mobile, PHP, Theme