How To Load A Different Page For Mobile Users

This tutorial includes 2 different ways to load a different page for mobile visitors. The 1st uses PHP code and the 2nd jQuery.

Here’s the PHP code if you want to use this method:

add_filter( 'template_include', 'mobile_page_template', 99 );
function mobile_page_template( $template ) {
if ( is_front_page() && wp_is_mobile() ) {
    $new_template = locate_template( array( 'mobile-page.php' ) );
    if ( '' != $new_template ) {
	return $new_template ;
	}
}
return $template;
}

The above method uses the is_front_page() and wp_is_mobile() conditional tags to load a template named mobile-page.php. The template is only loaded for mobile users if they are viewing the front page.

Note: wp_is_mobile() is not 100% reliable.

jQuery Redirect

This jQuery enables you to redirect users to a specific URL once the window width passes a specific width. You can control which pages load the jQuery using conditional tags. In this case the is_front_page() conditional tag only loads the jQuery when viewing the front page and the visitor is only redirected once the window width is less then 680px.

Code Installation

Add the PHP code to your child themes functions.php file and the jQuery to a new file in your child themes root directory named mobile.js