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

1 Views

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.

Read More

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?

Post Views: 1

Related posts

Leave a Reply

7 comments

  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' );

  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.

  3. This should work: (insert it in functions.php)

        //* Redirect homepage on mobile
add_action( 'wp_head', 'wps_params', 10 );
function wps_params() {
    ?>
    	<script>
	if (window.location.pathname == '/' && jQuery(window).width() <= 480) {
	   window.location = "/webshop/";
	}
	</script>

    <?php
}

    Replace “/webshop/” with your link of the mobile homepage.

  5. It’s easy and no need to code everything. Install “Redirection” plugin from wordpress repository.
    1. Go to the settings page.
    2. Enter the “Source URL” with your default desktop’s homepage
    3. On the “Match” option, select “URL and user agent” & on the “Action” option select “Redirect to URL”. Click “Add Redirection”.
    4. New configuration option will be appeared. Give any title you want. The “Source URL” must be blank (means that is your base homepage). On the “User Agent” option, choose whether iPhone or Android. On the “Matched” option, set the redirection you want for the mobile homepage.

    Done!

    You surely can differentiate the homepage on desktop and mobile device based on the redirection you have set before with that plugin. However, you cannot have same url name (ex: http://www.abcde.com for desktop & http://www.abcde.com/mobilehomepage for mobile device).

  6. This is great for me:

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

  7. Adding the following to your functions.php should do the trick:

    //* Redirect homepage on mobile

add_action( 'wp_head', 'wps_params', 10 );

function wps_params() {
?>

<script>
if (window.location.pathname == '/' && jQuery(window).width() <= 480) {
   window.location = "/webshop/";
}
</script>

<?php
}