How to set a different Static homepage for Mobile version? (WordPress)

Question

I would like to have a different static homepage for my mobile version of my website. It is not really an extra mobile version but it is responsive.

I have a Fullscreen Image slider right now set as the static homepage. This scales to the screensize, due to the responsive build of the website, but it does not look very nice on a mobile device, such as an iPhone. So I have this other homepage template which I would like to use when the website is being viewed on a mobile device.

Can this be done by any plugins or should it be done by coding? I don't want to use a theme switcher or something like that, I just want to have a different static page set for mobile devices.

How can I do this?

Answer 1

You could use wp_is_mobile to check for mobile, and hook into template_redirect to load a different template if mobile is detected:

function so16165211_mobile_home_redirect(){
    if( wp_is_mobile() && is_front_page() ){
        include( get_template_directory() . '/home-mobile.php' );
        exit;
    }
}
add_action( 'template_redirect', 'so16165211_mobile_home_redirect' );

Answer 2

I would include Mobile-Detect into the theme in its own folder and add this code in the beginning of header.php:

if( is_front_page() ){

    include_once('mobile-detect/Mobile_Detect.php');
    $detect = new Mobile_Detect(); 

    if ( $detect->isMobile() || $detect->isTablet() ) {
        $redirect_url = 'http://example.com/mobile_home';
        header('Location: ' . $redirect_url ); // Redirect the user
    }
}

You could customize this solution to work just as you want. I have used this for several projects for similiar solutions.