The popularity of smartphones continues to rise, so it is becoming increasingly important to ensure that your site’s content is clear and readable on the small screen.
The WordPress.com default 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 several options:
- Display either excerpts or full posts on the home page and archive pages.
- Always display posts on the front page (helpful if you use a static front page that does not work well with the mobile theme)
- Turn off the Custom Header text color for the mobile theme (useful if your custom header text color is too light to read against the mobile theme’s white background)
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.
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.
A search box appears to the right of the menu, allowing visitors to quickly find content.
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 much 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.