Redirect Mobile Users to a Mobile WordPress Theme

Posted by Chris Coyier • Updated on February 10th, 2017

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¹ 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 Switcha plugin

Theme Switcha is 100% free and downloadable from the WordPress Plugin Directory. 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://example.com/?theme=Your_Mobile_Theme

That’s just an example; you can get your actual theme-switching links by visiting the plugin settings.

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.
}

And that’s all there is to redirecting mobile users to a custom theme!

Notes

¹ Editor’s note: 404 link removed.

24 responses ↓

About the author

Chris Coyier is a real-world web designer who has been reaching for WordPress to power client sites for many years. He subscribes to the theory that not only is WordPress capable of powering any website it is almost always the right choice. His other projects include CodePen and Quotes on Design.

View all from Chris Coyier

← WPLookup

Why Choose WordPress? →

24 responses

dave rupert

December 7, 2009 @ 9:27 am

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.
- taotsu
  
  December 8, 2009 @ 4:29 am
  
  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?
Nolan Neeley

December 7, 2009 @ 9:31 am

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

December 7, 2009 @ 10:23 am

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

The better solution is a mobile stylesheet (media="handheld").
- Chris Coyier Post Author
  
  December 7, 2009 @ 10:25 am
  
  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.
- Rachel Nabors
  
  December 7, 2009 @ 12:57 pm
  
  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 @ 6:26 am
  
  The best way to get out of a perpetual loop is to use cookies.
Aamir - Mobile blogger

December 7, 2009 @ 2:08 pm

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

December 7, 2009 @ 2:32 pm

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?
- Chris Coyier Post Author
  
  December 7, 2009 @ 2:34 pm
  
  No you don’t need multiple installs. The URL just CHANGES THE THEME of the current install =)
Peter Wilson

December 7, 2009 @ 3:22 pm

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.
designfollow

December 7, 2009 @ 4:20 pm

Thank you very much this will be very helpfull
Tommy

December 8, 2009 @ 8:17 pm

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?
Dan Smart

December 9, 2009 @ 12:47 am
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);
```
- Chris Coyier Post Author
  
  December 10, 2009 @ 5:53 pm
  
  Very nice, thanks Dan!
MK

December 9, 2009 @ 5:44 am

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 ?
- Chris Coyier Post Author
  
  December 10, 2009 @ 5:53 pm
  
  Right.
Matthew Muro

December 9, 2009 @ 6:29 am

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.
- Chris Coyier Post Author
  
  December 10, 2009 @ 5:53 pm
  
  I’ll have to check that out. Figures there would be pluggins popping up to help with the mobile frenzy.
Sam Logan

December 15, 2009 @ 5:38 am

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.
fr3aky _

December 17, 2009 @ 11:50 am

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.
James Pearce

December 26, 2009 @ 5:10 am

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.

Love to know how you get on!
Tips Menulis Online

February 11, 2010 @ 7:27 am

Great info, thank a lot.
Roshan Baskota

July 7, 2012 @ 11:19 am

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.