5

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 ) );
}
John
  • 75
  • 1
  • 6
  • Detect mobile device in javascript - http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery Redirect to a page with javascript - http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-in-jquery-javascript – ılǝ Oct 10 '13 at 01:07
  • You can only leave an `if()` without `{ }` if there's only one command after it. `wp_redirect` and `exit` must go together and you have them separated. In my example I use `if it is NOT then return`, past that point everything is executed. Properly indenting your code should show this kind of errors. – brasofilo Oct 14 '13 at 23:22
  • I know you're going to kill me and roll your eyes at my newbie-ish-ness, but it there any way you can re-write my code above putting in the suggestions you typed? Also, is putting the code in functions.php a viable possibility, and if not where should I put it? Thank you so so much! – John Oct 15 '13 at 22:17
  • There's an important link in my answer, with the keyword **always**. This is the code you need `if( is_mobile_detectmobilebrowsers_com() ) { wp_redirect( site_url( 'mobile-schedule' ) ); exit(); }` – brasofilo Oct 17 '13 at 01:35
  • Ran into another problem, which I'm sure doesn't surprise you. I've posted my new code above (I'm not sure where else to put it). What happens now is that the desktop version of my site is fine, but when I go to a page on my site on a mobile device, instead of redirecting, 2 things happen: First, I get a "too many redirects" error. Second, instead of redirecting, it simply "adds" the destination page onto the URL. For example, it turns lifebyjohn.com into lifebyjohn.com/http//lifebyjohn.com/mobile-schedule. This happens on every page, not just the page I want redirected from. Help! :-) – John Oct 17 '13 at 22:41
  • Oh, and by the way, I also tried typing 'mobile-schedule' after wp_redirect instead of the whole http address, but maybe I'm doing something wrong there too. :-) – John Oct 18 '13 at 00:41

4 Answers4

2

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 ) );
}
Community
  • 1
  • 1
brasofilo
  • 23,940
  • 15
  • 86
  • 168
  • This looks great, I'll try it out! However, is there a possiblity of incorporating something like www.detectmobilebrowsers.com into your solution? I just want to make sure I'm using a way of redirecting that will capture all of the mobile devices and not just some. Thanks! – John Oct 12 '13 at 00:32
  • You can use whatever browser detection class you want and bundle it together with `template_redirect`. You have to check the code of the class I'm using as example to see all available options, there are plenty. But I tested detectmobile's function and works ok, answer updated. – brasofilo Oct 12 '13 at 01:31
  • I know you're going to kill me and roll your eyes at my newbie-ish-ness, but it there any way you can re-write my code above putting in the suggestions you typed? Also, is putting the code in functions.php a viable possibility, and if not where should I put it? Thank you so so much! – John Oct 17 '13 at 01:26
1
<?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

Community
  • 1
  • 1
0

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.

brasofilo
  • 23,940
  • 15
  • 86
  • 168
0

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.