How to redirect a single page for mobile devices?

Question

I am attempting to find a solution to redirect a single page from my WordPress website to a mobile version (I do not want to redirect all mobile users for all my pages to a different page or theme, only just a single page).

However, I have yet to find a plugin that can do this. In any event, I’m just looking for an easy way to get a mobile device redirect going for my single page, hopefully through a method that continually “updates” itself like DetectMobileBrowsers or WURFL.

Having done some research online, I’ve come across some PHP code that can distinguish between different pages on a WordPress website, such as:

<?php if (is_page(1111)) {…….}; ?>

What I’m thinking of doing is putting some kind of mobile redirection script in that PHP code, so that I achieve my goal of only needing the mobile redirection to happen for one page on my website.

However, I have attempted to put the code (both PHP and Javascript) from detectmobilebrowsers.com into that PHP code, and have tried putting it in both header.php and page.php to no avail (in fact, it crashes my site in most cases, or just doesn’t work). Am I going about this wrong? Am I using the wrong code? Do I need a plugin to help with this?

----UPDATE 2----

My next attempt at the code:

add_action( 'template_redirect', 'redirect_so_19285382' );

function redirect_so_19285382() 
{
    if (is_page(2766))
        return;

    if( is_mobile_detectmobilebrowsers_com() ) { wp_redirect( site_url( 'http://lifebyjohn.com/mobile-schedule' ) ); exit(); }
}

function is_mobile_detectmobilebrowsers_com()
{
    $useragent=$_SERVER['HTTP_USER_AGENT'];
    return 
        preg_match(     '/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i', $useragent ) 
    || preg_match( '/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i', substr( $useragent,0,4 ) );
}

Answer 1

If you're looking for a wordpress plugin to do this, check out http://www.ultimate-wordpress-mobile-redirect.com/

This plugin will allow you to setup a redirect for a single page/post on your wordpress website.

Answer 2

<?php 
if (is_page(1111))
{
    echo "
    <script>
        window.onLoad = function()
        {
            if (typeof window.orientation !== 'undefined')
            {
                document.location='http://example.com';
            }
        }
    </script>";
}
?> 

Untested. Source: 2nd answer at: Detecting a mobile browser

Answer 3

Do I need a plugin to help with this?

Yes, we always need plugins ;)

I use Chriss Schuld's Browser Class^☉ to detect this at PHP level.
_{☉ original and a fork of mine to prevent link rot}

Then, it's just a matter of using template_redirect hook to check for our page, sniff the browser agent and redirect if that's the case:

<?php
/**
 * Plugin Name: Redirect one page for mobile
 * Description: Redirect to Mobile Template Page. Adjust the hardcoded values.
 * Plugin URI:  http://stackoverflow.com/q/19285382
 * Version:     1.0
 * Author:      brasofilo
 * License:     GPLv2 or later
 */

# Download and put the file together with this plugin
# https://raw.github.com/brasofilo/Browser.php/master/lib/Browser.php
if( !class_exists( 'Browser' ) )
    require_once( 'Browser.php' );

add_action( 'template_redirect', 'redirect_so_19285382' );

function redirect_so_19285382() 
{
    # Not our page, bail out
    if( !is_page( 'about' ) ) // <------- adjust
        return;

    # Not mobile, bail out
    if( !browser_check_so_19285382( 'mobile' ) )
        return;

    # It is our page, redirect dude!
    wp_redirect( site_url( 'about-mobile' ) );  // <------- adjust
    exit();
}

# Browswer sniff, create as many cases as you need
function browser_check_so_19285382( $what = '' ) 
{
    $browser_check   = new Browser();
    $browser_info    = $browser_check->getBrowser();
    $browser_version = $browser_check->getVersion();

    switch( $what ) 
    {
        case 'chrome':
            if ( $browser_info == Browser::BROWSER_CHROME ) 
                return true;
            else 
                return false;
        break;
        case 'ie':
            if ( $browser_info == Browser::BROWSER_IE ) 
                return true;
            else 
                return false;
        break;
        case 'mobile': 
            $check_this = array( // <------- adjust the array
                Browser::BROWSER_NOKIA, 
                Browser::BROWSER_NOKIA_S60, 
                Browser::BROWSER_BLACKBERRY, 
                Browser::BROWSER_ANDROID, 
                Browser::BROWSER_IPAD, 
                Browser::BROWSER_IPOD, 
                Browser::BROWSER_IPHONE
            );
            if( in_array( $browser_info, $check_this ) )
                return true;
            else 
                return false;           
        break;
    }
    return false;
}

---

Or using detectmobilebrowsers.com's solution, we use this in the function redirect_so_19285382:

if( is_mobile_detectmobilebrowsers_com() )
{
    wp_redirect( site_url( 'about-mobile' ) );  // <------- adjust
    exit();
}

And add their method:

function is_mobile_detectmobilebrowsers_com()
{
    $useragent=$_SERVER['HTTP_USER_AGENT'];
    return 
        preg_match( '/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i', $useragent ) 
        || preg_match( '/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i', substr( $useragent,0,4 ) );
}

Answer 4

There is also wp_is_mobile WordPress function.

I used it with a simple if statement. The main concepts are the same for the solution above mentioned.