How to Make Your WordPress Site Mobile Friendly with WPTouch?

How to Make Your WordPress Site Mobile Friendly with WPTouch?

As mobile web usage has skyrocketed, you may want to make a WordPress powered website mobile-friendly so as to grasp more page views and hence boost search rankings. Generally speaking, there are several different ways for you to handle mobile visitors, and we prefer to demonstrate how it is easy to make a WordPress site optimized for mobile by using the WPTouch plugin.

If you wish, it is also possible to use a responsive WordPress theme in replace of the existing theme layout. Note that, this method can generate a similar effect as a free WP plugin does, and it has been favored by many website owners who need only one URL per page. But if you’d like to setup a decent mobile site within a few clicks, you can take the following steps for reference.

About WPTouch Plugin

Invented by a company named as BraveNewCode, WPTouch is a handy mobile plugin that would replace your WordPress site with a simple-yet-responsive mobile theme. What really shines in its features is that you can get the same kind of interface that is provided by a dedicated mobile application. Above all, this highly-flexible plugin allows all visitors to switch between the custom mobile theme and the site’s regular theme.

Apart from that, the WPTouch plugin will provide you with a huge amount of control over many aspects of the appearance, without requiring a single line of code. Pay attention that, this mobile solution by far has more than four hundred thousand “Active Installs.” The latest 3.7 version is free to download through the following URL.

Download URL: https://wordpress.org/plugins/wptouch/

About WPTouch Plugin

How to Get the Plugin Started in WordPress?

As the WPTouch plugin is free to use, you can get it installed in WordPress directly from the plugin directory. To do that, just log onto the WordPress dashboard by typing http://yoursite.com/wp-login.php in the web browser. Upon entering, navigate to “Plugins” > “Add New” as below.

Install & Activate WPTouch Plugin

Here, all you need to do is enter “wptouch” in the upper-right search box and then click to install the first item that is listed in the results. Note that, it will take a little while to accomplish the whole installation process. If done correctly, this newly-activated plugin will be accessed from this “Installed Plugins” tab.

Installed & Activated WPTouch Plugin

How to Make Your WordPress Website Mobile Friendly Using WPTouch?

As you may notice, there is a new “WPtouch” tab added to the admin sidebar of your WordPress dashboard. Just move your mouse over the tab and you will be displayed with six different sections that may get you overwhelmed easily. In this case, we would firstly walk you through all the essentials need to be done in logical order.

Test Whether the WPTouch Works
Before making any changes, let’s test whether or not the WPTouch plugin is working. As this free version of WPTouch only includes one single default theme, it should be all set on activation. To take a preview of how your WordPress website will be presented on a much smaller screen, just jump into “WPTouch” > “Core Settings” as follows. And then, click on the bottom “Preview Theme” button to browse it on both “Mobile” and “Desktop” devices. Make sure that the mobile theme can load properly.

Test Whether the WPTouch Works

Create a New Mobile Menu
In the meanwhile, this plugin provides you the ability to specify a menu that will appear on visitors’ mobile devices. Just create a new menu by going to “Appearance” > “Menus” firstly. Assuming that you’ve created a highly-relevant menu name like “Mobile Menu”, let’s revert back to the “WPTouch” > “Menus” settings page. From the following configuration page, you can choose and use the newly-created “Mobile Menu” from this “Header Menu” drop-down list.

Create a New Mobile Menu

It is advisable to check the “Menu Options” box so as to use menu icons for each menu item. To associate “Menu Icons” with different menu items, you can drag them from the left-hand “Icon Set” column to the right-hand “Menu” section.

Associate Icons with Iteams

By default, there are up to twelve icons offered by the plugin. If needed, you can also upload your preferred icons by clicking this “Upload Icon” button within the “Icon Upload & Sets” tab. Beware that, the uploaded icons should be in 48×48 pixels.

Upload Your Icons

Add Your Own Bookmark Icons
Once your visitors bookmark your WordPress website, an icon is likely to be embedded to their home screen. In this sense, a bookmark icon can not only make your website easy to find in the crowded browser, but also help with your own branding. At this place, just navigate to “WPTouch” > “Theme Settings” > “Bookmark Icons” to create two different icons, one for iOS device (in 192×192 pixels) and one for Android device (in 96×96 pixels).

Upload Bookmark Icons

Within the next “General” tab, there are more settings implemented on a WordPress site. For instance, you will be able to decide how many posts will be displayed in the post listings, accept nested comment replies from mobile visitors and even use login form for the frontend. If you are unsure about those options, you can leave them to the defaults for now.

Make General Settings

By the way, the “Theme Colors” and “Site Logo” can also be tweaked inside this “Branding” tab. At the same time, you are empowered to define your own “Smart App Banner”, “Theme Footer”, “Theme Shapes”, “Menu Style” and much more.

Settings to Branding

Modify the Rest Options of WPTouch
Till present, you are all done with the basics. As a matter of course, it is possible to further modify how your mobile website will look and behave through the rest options in “Core Settings” and “Themes & Extensions” tabs.

Core Settings
From here, you can also re-define the website title and make a selection of your preferred language from the “Regionalization” list. Also, this plugin enables you to display the custom mobile theme only to site administrators, and in the meantime, embed custom JavaScript or HTML code.

Configurations to Core Settings

Themes & Extensions
As you may notice, there is only one design involved in the free version of WPTouch – Bauhaus. More advanced themes are limited to the premium WPTouch Pro version, which is priced from $69 regularly.

Themes in WPTouch

In the next “Extensions” tab, there are up to five extensions used to extend the plugin functionality. Beware that, only if you purchase the commercial Pro version will you access those listed extensions.

Extensions in WPTouch

Is It Necessary to Upgrade to the WPTouch Pro Version?

As noted, WPTouch indeed delivers a quick and painless way to display mobile-friendly content to your visitors. However this mobile plugin cannot be compared with its Pro version that not only offers more themes and extension options, but also includes a one-to-one support system. For those large websites in need of responsive caching and images, the free version of WPTouch may not be an ideal option.

Pro Version of WPTouch

And instead, this free WPTouch plugin is good enough to make a small-sized or personal website mobile optimized. By using the free version, you can also get your mobile website up and running in no time!