Support Home > Mobile > Mobile Theme

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 offers a way to make your site mobile-friendly if your current theme is not responsive or hasn’t been updated in a while.

Our 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, go to Jetpack -> Settings -> Writing tab and scroll down to the Theme Enhancements and the “Enable the Jetpack Mobile theme” option and turn that on.

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.

Jetpack Mobile Front Page

Mobile Theme Options

The Mobile Theme gives you different options:

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

To access the Mobile theme options:

  • Visit Jetpack -> Settings -> Writing tab and scroll down to the Theme Enhancements section in your Dashboard.
  • Find the “Enable the Jetpack Mobile theme” option and click the dropdown arrow.
  • Select your desired options, then click Save Settings.

Custom Menus

Mobile theme's menu and search box

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:

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)

Mobile theme with custom header image and custom background color

mobile-widgetsYou’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 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!

Privacy Information

This feature is deactivated by default. If you ever need to deactivate this feature, you can toggle the Enable the Jetpack Mobile theme setting in the Theme enhancements section from Jetpack — Settings — Writing in your dashboard.

Data Used
Site Owners

Site Visitors

Activity Tracked
Site Owners

We track when, and by which user, the feature is activated and deactivated. We also track when, and which, configuration settings are modified. A cookie (akm_mobile) is used to remember whether or not a visitor of the site wishes to view the mobile version.
Site Visitors

A cookie (akm_mobile) is used to remember whether or not a visitor of the site wishes to view the mobile version. See more information about how Jetpack uses cookies here.
Data Synced
Site Owners

We sync options that identify whether or not the feature is activated and how its available settings are configured.
Site Visitors

  • Table Of Contents

  • Categories

  • Contact Us

    Need more help? Feel free to contact us.