WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» WordPress Plugins» Making Your WordPress Mobile Friendly with WPtouch Pro

Making Your WordPress Mobile Friendly with WPtouch Pro

Last updated on March 4th, 2014 by Editorial Staff
0 Shares
Share
Tweet
Share
Pin
Special WordPress Hosting offer for WPBeginner Readers
Making Your WordPress Mobile Friendly with WPtouch Pro

Depending on your site’s demographic, it might be important for you to have a mobile-friendly website. You can do this by either using a responsive WordPress theme which adapts to different screen sizes / devices, or you can create a mobile-specific version of your site if you don’t want to change your site design. In this article, we will show you how to create a mobile-friendly WordPress site with WPTouch Pro.

WPtouch Pro is a commercial WordPress plugin that can transform your WordPress site into a native mobile experience for modern smartphone browsers. It is fast, has full internationalization support, iOS homescreen integration, and tons of other ways to improve mobile user experience.

Once you’ve purchased WPtouch Pro, you’ll receive a license key and the download file for the plugin. You need to install it on your blog (follow our simple plugin installation guide), and then activate it from your dashboard.

Upon activation, the plugin will display a notification reminding you to enter your license key. You need to enter the license key in order to receive plugin updates, download themes and addons. Click on ‘activate your License’ link to enter your license key.

License notification

On next screen, simply enter your account email address (one you used to purchase the plugin) and your product license key, then click on the activate button. WPTouch will now verify your license key and will display a success message.

Enter your WPTouch Account Email and License Key

Upon activation the plugin adds a WPTouch Pro menu item in your WordPress admin bar. To configure the plugin you need to go to WP Touch Pro » Core Settings.

WPTouch Pro Core Settings

On the core settings screen, you can configure various options for your site’s mobile version. The first option on this screen is to change the site title and byline. This is particularly useful if your site has a lengthy title and byline that does not fit well into mobile screens.

The next option on this screen is Regionalization. WP Touch Pro automatically detects your site’s language from your WordPress installation however you can also manually select the language using this option.

The Display option on the core settings screen allows you to manually disable mobile theme without deactivating the plugin. The default setting is Normal which enables mobile theme display for all visitors accessing the site through a mobile device. You can change it to Preview, so the mobile theme is only displayed to site administrators when they are logged in. You can also choose Disabled to completely turn off mobile theme display.

WP Touch Pro Extra Settings

There are some advance options available on the core settings page. For example, you can choose a custom landing page for the mobile version of your site. You can add custom code which will appear in the theme footer area. You can also backup all WP Touch Pro settings and then import them on another WordPress site with WP Touch Pro. This is a good option if you have a staging site or a local install.

Once you have gone through the core settings page, you can preview your mobile site right into your desktop by clicking on the Preview Theme button at the bottom of this page. Once you are satisfied with how your theme looks, you can click on Save Changes button to save your settings.

WP Touch Pro - Mobile theme preview

Changing The Mobile Theme in WPTouch Pro 3

By default WPTouch Pro 3 comes with one mobile theme pre-installed. You can download and install additional themes from WPTouch Pro » Themes & Extensions. Bauhaus, CMS, Classic Redux, and Simple are the themes available with all licensing plans. To install a theme simply click on the Install button below the theme. WPTouch Pro will download the theme from the cloud and install it. Once a theme is installed, you can click on the activate button to use that theme.

Switching mobile themes with WPTouch Pro

Customizing Your Mobile Theme in WPTouch Pro3

Once you have selected the theme for your mobile site, you may want to customize it to meet your needs. To do that you need to go to WPTouch Pro » Theme Settings. WPTouch Pro’s mobile themes are highly customizable. You can fine tune every aspects of your mobile site from the theme settings screen. We will walk you through different sections of Theme Settings.

Theme settings screen in WPTouch Pro 3

On the top menu tab, you can see the different areas of your theme that you can customize. You will start from the General tab which contains options for some basic settings like the number of posts to show on the front page, enable category slider, enable featured posts slider, etc. The default settings should work for most sites, but you can make changes as needed. You will also notice an info icon next to some options, taking your mouse over to the icon will show you contextual help for that option.

Once you have made the changes to your theme, you can preview those changes by clicking on the Preview Theme button at the bottom of the page. When you are satisfied with the changes you have made, you need to click on Save Changes button to save your theme settings. There is also a reset button in case you want to revert back to default settings.

Preview your Mobile Theme settings before saving

After configuring the General settings for your mobile theme, switch to the Branding tab. This is where you can upload your own logo, background, custom fonts, social media icons, etc. You can also change theme colors to meet your logo and your brand colors.

Change theme colors and upload custom logo from branding screen

Turning Your Site into a Mobile Web App

WPTouch Pro allows you to take full advantage of mobile device features by turning your site into a web app. First you need to click on Bookmark Icons tab on Theme Settings screen. You would need to upload two icons, one for Android devices and the other for iOS devices (iPhone, iPod, and iPad).

Add bookmark icons for mobile devices

After that, click on the Web-App Mode tab in theme settings. Simply check the box to enable iOS web-app mode, and this will display advance settings for the web-app mode. You can use the default settings, or you can upload your own custom start up screens.

Turning on the web-app mode for iOS devices

Monetize Your Mobile Site With WPTouch Pro

WPTouch Pro themes also make it extremely easy for you to display advertisements on your mobile site. You need to go to Advertising tab under theme settings and choose from Google Adsense or custom advertising service.

Displaying advertisement on your Mobile Site

For Google Adsense, you will need to enter your Google Adsense publisher ID and the slot ID which you can obtain from your Google Adsense account. After that you need to choose the location where you want ads to display. Save your changes and your mobile site will start showing ads.

Customizing Navigation Menus For Mobile Site in WPTouch Pro

WPTouch Pro uses the default WordPress menu functionality, but allows you to modify or choose how you want to display menu on your mobile site. To configure menus, you need to go to WPTouch Pro » Menus. First you need to choose a menu. You can choose to display WordPress pages in the menu, or choose an existing menu.

Choose a menu for your mobile site

On the Menu Setup tab, you can further customize your WordPress menu. You can associate icons with each menu item by simply dragging an icon to a menu item.

By default WPTouch Pro comes with Elegant icon set designed by Elegant Themes. You can install other icon sets by clicking on the Install button next to them or upload your own custom icon sets.

Choose and install an icon set or upload your own

WPTouch is a great plugin to convert any WordPress powered website into a full-fledged mobile web application. With beautiful themes and powerful customization options you can create great looking mobile sites within minutes without writing a single line of code. We hope this article helped you create a mobile-friendly site with WP Touch Pro. For feedback and questions, you can leave us a comment below or follow us on Twitter.

0 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

14 Comments

Leave a Reply
  1. Justme says:
    May 29, 2015 at 10:47 pm

    How can I view mobile view of my site in local server? I’m using WPtouch plugin, but I can’t view the mobile version on local server.

    I guess there should be a link for that.

    Reply
    • don says:
      Jun 3, 2015 at 2:03 pm

      use Google Chrome, preview theme

      Reply
  2. Ramit Joshi says:
    May 15, 2015 at 1:35 pm

    This is nice plugin, I already use this plugin. i am facing the problem with “Advance custom field” plugin. I am using “ACF” plugin on home page but “ACF” field text not showing on my home page.Somebody tell me either i have to code for “ACF” option in Home page or there is another way to do this.

    Reply
  3. JAE says:
    Mar 2, 2015 at 11:33 pm

    OMG you are so awesome! Thank you a million times! I was quoted over $AUD2,000 to mobile friendly my website! This saved me a motza of money – and it was easy to install with your easy to follow instructions! Thanks a ton!

    Reply
  4. Michael says:
    Feb 18, 2015 at 8:20 pm

    WPtouch is crap. I purchased the pro version and I was utterly dissapointed with their support. The whole concept is proprietary and has nothing to do with WordPress standards. Don’t waste your time and money.

    Reply
  5. Marlies (GM&PB) says:
    Oct 23, 2014 at 8:52 am

    Hi,

    I just started using this plugin. I used it for the website of the company I work at & for my own blog. I have a weird problem with the icon sets: when I want to install another set of icons (as provided by the plugin) it gives an error and says it cannot install the icon set. Weirdly enough I only experience this problem with my own blog and not with the website of my work.
    Is this because my blog isn’t custom, while the website of my work is?

    Thanks in advance,
    Marlies

    Reply
  6. guzie says:
    Aug 3, 2014 at 4:12 pm

    I use the free version of wptouch. But for some reason(s) it reverts the desktop version to the mobile page. How can I fix this.

    Reply
    • WPBeginner Staff says:
      Aug 3, 2014 at 5:04 pm

      Please contact plugin support.

      Reply
    • Gaurav Srivastava says:
      Nov 8, 2014 at 8:51 am

      Uninstalled. It reverts mobile page version to desktop. It is very annoying.

      Reply
  7. Kate says:
    Apr 30, 2014 at 7:10 pm

    I already have a mobile responsive theme of my website…however my astore does not show in full width on a mobile device. It only shows the first two columns of the store…..any suggestions how to solve?

    Reply
  8. Diena says:
    Mar 13, 2014 at 3:42 pm

    This plugin sounds great, but wouldn’t it affect the site load time and create redirects?

    I want to use it but don’t want to slow my site.

    Reply
    • WPBeginner Support says:
      Mar 14, 2014 at 11:29 am

      The purpose of serving a mobile theme is to make sure that your site loads faster on mobile devices. The redirects only take place when a mobile device is detected by the plugin.

      Reply
  9. Bruce Gerencser says:
    Mar 4, 2014 at 12:21 pm

    Just one point on your excellent article. You use the Bauhaus theme in this tutorial and it does not work on the iPad. Took me an hour trying to get it to work, only to find out it, as of day, does not work with the iPad. I hope they add this fuctionality in the future because I would really love to use the Bauhaus theme.

    Long time reader, first time commenter.

    Reply
    • WPBeginner Support says:
      Mar 4, 2014 at 4:25 pm

      Bruce, thanks for the comment. We would recommend you to contact WPTouch’s support and let them know the issue you are facing.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
MonsterInsights
MonsterInsights
Google Analytics made easy for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2019 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2019)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2019)
    • SiteGround Reviews from 1032 Users & Our Experts (2019)
    • Bluehost Review from Real Users + Performance Stats (2019)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2019 – Step by Step Guide
Deals & Coupons (view all)
Dreamhost
DreamHost Coupon
Get 40% OFF on DreamHost and get a Free Domain.
Elegant Themes
Elegant Themes Deal
Get all 87 amazingly beautiful WordPress themes by Elegant Themes for only $69. That is like $0.79 per theme!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • Awesome Motive

Copyright © 2009 - 2019 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.