Mobile Theme

In this guide you will learn how to use the mobile theme that’s included in Jetpack, enable excerpts or full posts on the home page and archive pages, and show a promo for the WordPress mobile apps in the footer of the mobile theme. You’ll also learn how to create custom menus, headers, and backgrounds for your mobile theme and what you can do with sidebars and widgets.

Jetpack’s Mobile Theme displays your content in a clean, uncluttered interface, making it easy for mobile visitors to scan your site. Furthermore, we took special care to make the mobile theme as lightweight as possible to ensure faster loading times.

Enabling the Mobile Theme

To use the Mobile Theme, all you have to do is activate the Mobile Theme module on the Jetpack dashboard.

How do I see the Mobile Theme in action on my site?

The Mobile theme will only display on a mobile operating system, so to see it in action, you’ll need to visit your site from a smartphone.

Mobile Theme Options

The Mobile Theme gives you different options:

• Display either excerpts or full posts on the home page and archive pages.
• Show a promo for the WordPress mobile apps in the footer of the mobile theme.

To access the Mobile theme options:

• Visit Jetpack → Jetpack in your Dashboard.
• Once on the Jetpack front page, locate the Mobile Theme module, and click Configure. This will take you to the Configure Mobile Themes page.
• Select your desired option, then click Save Configuration.

Custom Menus

The Mobile Theme searches through the custom menu locations for your current desktop theme and displays the menu assigned to the primary position. If you have no custom menus assigned, it will default to the standard page menu.

If you’d like to use a specific menu, and not the one assigned to the primary position, you can use the `jetpack_mobile_theme_menu` to force the Jetpack mobile theme to use a menu that you specify. To do so, you’ll need to install a functionality plugin first.

Then, you would need to find the ID of the custom menu you’ve created. If you go to Appearance > Menus in your dashboard and choose to edit your custom menu, that menu’s ID will be the number at the end of the URL. For example, in this URL:

yoursitename.com/wp-admin/nav-menus.php?action=edit&menu=75

The number 75 is the menu ID.

Then, you would add this code to the functionality plugin you’d previously installed:

function jetpackme_mobile_theme_menu() {
    return 75;
}
add_filter( 'jetpack_mobile_theme_menu', 'jetpackme_mobile_theme_menu' );

Custom Header and Background

The Mobile Theme respects the following custom header and background settings from your current desktop theme:

• Custom header image
• Custom background image or color
• Custom background image repeat and position settings
• Whether or not to display the header text (applies to site title and description)
• Site title text color (if you have enabled the custom header text color in the mobile theme options)

Sidebars and Widgets

You’ll notice that the Mobile Theme uses a one-column layout. This ensures that your content has as much room as possible on smaller screens. Widgets appear below the content, just before the footer.

Currently, the Mobile Theme displays one sidebar below the main content area, just above the footer. In order for widgets to appear, this sidebar must have a sidebar id of “sidebar-1”. If you are unfamiliar with sidebar ids, you can read more about it on the WordPress.org Codex.

If your widgets are missing on the Mobile Theme, the likely culprit is that your desktop theme does not have a sidebar with a sidebar id of “sidebar-1” (the id must be exactly “sidebar-1”). To verify this, open your theme files and locate the register_sidebar() function (usually in functions.php). If you’d like widgets to appear, you can change the ID of the sidebar to “sidebar-1”. Here is an example:

register_sidebar( array(
    'id'          => 'sidebar-1',
    'name'        => __( 'Right Sidebar', 'theme-text-domain' ),
    'description' => __( 'This sidebar is located in the right column', 'theme-text-domain' ),
) );

Please note: If you have multiple sidebars, only one sidebar can have a sidebar id of “sidebar-1”. In this case, you would first decide which sidebar you want to appear on the Mobile Theme, and then change the id of that sidebar to “sidebar-1”.

Switch to “Full Version”

Viewers have the option to switch to the desktop version of your site by tapping the “View Full Site” link at the bottom of each page.

Tips and Tricks

IF you’d like to exclude a category from the mobile theme, or remove Jetpack’s Sharing Buttons, then have a look at our tips and tricks!