Design

Themes »Mobile Themes

Table of Contents

All themes in the WordPress.com theme repository adapt to devices of different sizes by default. If you’re using a retired or older theme that doesn’t adapt to different devices, such as smartphones, then you can enable the WordPress.com mobile theme. Visitors who view your site from a smartphone will then see the mobile theme in place of your main theme’s design:

mobile-screenshots-ios

Older devices will display a version of the WordPress Mobile Edition theme:

The WordPress.com mobile theme features your header image and custom background. When viewing your blog on older phones, the focus will be on loading the blog quickly while displaying the important information about your content.


Enabling or Disabling the Mobile Theme

Note: Some of the instructions from this guide are referring to the WP Admin dashboard. You can get to this dashboard by adding /wp-admin to the end of your site’s url (e.g.: example.wordpress.com/wp-admin)

If you would like to enable or disable the mobile theme on your blog, go to Appearance → Mobile in your WP Admin dashboard and select either Yes or No for the Enable mobile theme option:

enable-mobile-theme-wordpress

The mobile theme is intended for use with older themes that don’t adapt to different devices by default. If you’re using a newer theme, the mobile theme is not necessary.


↑ Table of Contents ↑

Switching Between Full Site and Mobile Site View

Mobile visitors can switch to the full version of your blog using the links at the bottom of each page.

view-full-site

To switch back to the mobile-ready view, click View Mobile Site at the bottom.

view-mobile-site

↑ Table of Contents ↑

Custom Design

The custom header image, custom header text color, and custom background color and image are honored on up-to-date browsers for modern mobile devices.

If you have the Premium or Business upgrade and use Custom CSS, you can opt to apply custom CSS to the WordPress.com mobile theme. To enable this option, go to your Customizer → CSS and check the Include this CSS in the Mobile Theme option. Then use “.mobile-theme” at the beginning of your CSS selectors to target just the mobile theme.

Still confused?

Contact support.

Not quite what you're looking for?

Get Help