• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

Register for full access

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags