DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Redirect Mobile Users to a Mobile WordPress Theme

Posted by on

Let’s say you want to have a special theme for your WordPress site for mobile users. You don’t want to use a pre-canned solution or anything third-party, you just want to create and design the theme yourself. So what you need to happen is for the site to detect mobile users and server up an alternate theme instead. Here is how I might do it.

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 (404 link removed 2014/09/26) 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.
}

24 Responses

  1. I’ve actually been thinking about this a lot as I’ve been browsing on my iPhone more and more. When I find a google search result, click through and get redirected to the frontpage of the mobile site, I have NO IDEA how to find the content I originally googled. Severe usability problem there.

    With that in mind, it would be better to hijack which theme wordpress chooses, rather than do a header redirect, IMHO.

    • hm… there should be some way to take the site you request as a value and ad it to the switched theme, so you acutally end up at what you where looking for.
      At least thats what i would hope ^-^ any ideas, anyone?

  2. Quick and simple. Thanks for the post. I’m going to use this for a project I’m working on now.

  3. Your code sends a mobile user into a perpetual loop on the front page.

    The better solution is a mobile stylesheet (media="handheld").

    • No it won’t, because in the header.php file of the NEW theme, you won’t include the mobile testing code.

      And using a mobile stylesheet is great and all, but it’s not the same as using an entirely different customized theme.

    • Chris is right. Support for mobile stylesheets is spotty at best, and a style sheet doesn’t present the leaner, trimmer slice of information you can give a user with a special theme that excludes heavy things like advertising that mobile users might find useless.

    • Matthew Muro December 9, 2009

      The best way to get out of a perpetual loop is to use cookies.

  4. Aamir - Mobile blogger December 7, 2009

    oh thanks for the post , it would be very helpful for me

  5. This sounds very simple. Thanks for shating :) One question: would I need to have 2 installations of WordPress on my site or does theme=Your_Mobile_Theme already takes care of the redirecting?

  6. The dotMobi WordPress Mobile plugin is another good solution, I don’t think it’s perfect, but it’s well on the way.

    It can muck up some of the redirects built into wordpress, so best to have a canonical url meta tags.

  7. Thank you very much this will be very helpfull

  8. I’ve been bascially doing the same thing with the plugin iPhone Theme Switcher. It automatically switches the theme to one of your choosing when the user is browsing on an iPhone.

    Would doing it manually like you showed us be better?

  9. Timing! :-) This is the same thing I’ve just been working on, am shortly going to release my mobile plugin.

    One thing, why use the Theme Switcher plugin with header redirects, when you could do it directly in a small plugin of your own:

    Here’s the function:

    function filter_switchTheme($theme)
           {
           $mobile = mobile_device_detect();
           if ($mobile==true)
                  {
                  $theme = 'mobile_theme_name';
                  }
           return $theme;
           }

    And here’s the filters to call:

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

  10. Thanks Chris,

    How abt, all if I wanted to do is redirect users to a different URL ? Jst strip off the theme option from the URL ?

  11. Matthew Muro December 9, 2009

    I would also like to add that the WordPress plugin MobilePress handles the redirection as well as allowing you to apply different themes based on device.

  12. Hi Chris, thanks for the mobile code, some good adaptations in the comments too. I will try it out and the plugin Matthew suggested above. Keep up the good work.

  13. this is an amazingly simple solution. thank you for sharing.

    but: does anyone knows if google will penalize because of duplicate content? do we need to use the canonical meta tag in the header of the mobile theme?

    thank you.
    again.

  14. Mobile switching is not as easy as it sounds. You need to detect the device, but also take heed of the user’s desires (for a mobile or a desktop experience if their handset could support both).

    The WordPress Mobile Pack provides a finessed algorithm out of the box, with plenty of configuration options:

    http://wordpress.org/extend/plugins/wordpress-mobile-pack/

    Love to know how you get on!

  15. Tips Menulis Online February 11, 2010

    Great info, thank a lot.

  16. Roshan Baskota July 7, 2012

    I did the same but , got error on opera mini browser. It shows just a white blank page. With other mobile browser it is ok.

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry