These days your website needs to look great not only on desktops or laptops, but on mobile devices too. Recently, Google has started penalizing the sites that are not mobile-friendly.
Therefore, it is very important that your website has a proper mobile version. In today’s post, I will show you how to do that by using WPtouch Mobile WordPress Plugin.
Setting up the Plugin
Download and install the plugin on your WordPress site. Activating the plugin will create a new menu titled ‘WPtouch’ in your website dashboard. The plugin comes with lots of different options. In order to keep things simple, I will discuss the basic ones in this article.
Go to WPtouch > Core Settings to access the basic settings of the plugin. You will find two tabs there. We will discuss the ‘General’ tab first.
First of all, if you have a long site title you can define a shorter one for mobile devices in the ‘Site Title & Byline’ field. If you want to change the front page for mobile visitors, you can do that from the ‘Landing Page’ field. It is possible to redirect to a page or a custom URL. You can also choose to display a switch links for mobile visitors to request the desktop site.
In the ‘Compatibility’ tab, you will find separate options to apply WPtouch on selected URLs only and apply WPtouch to specific user-agents only.
Themes & Extensions
You will find the available themes in the WPtouch > Themes & Extensions page. However, the free page has access to only one theme and no extensions. Therefore, in order to use the other themes and the extensions you have to go for the pro version.
Theme Settings
The next page is Theme Settings. This is located at WPtouch > Theme Settings. The page is divided into several tabs. We will start with the ‘General’ tab.
In the ‘Blog’ section, you will find options to choose how many blog posts should be displayed, exclude specific tags and/or categories, allow nested comments for mobile devices, choose thumbnail, display post date, author, search field, etc.
The ‘Featured Slider’ section lets you enable a content slider for the mobile version of your website. You can choose how many posts to display, which posts to display, automatic slide, animation speed, etc.
Branding
Here, you will find several options to change the colors of the background, header and menu, links and post/page headers. You can also define a custom logo for your mobile site. Then, in the ‘Typography’ field, you can select the fonts for the mobile site.
‘Sharing’ section will allow you to customize the social sharing options. You can provide links to your various social media accounts in the ‘Footer Social Links’, which will be displayed in the footer of your mobile site.
In the ‘Bookmark Icons’ tab, you can provide low and high resolution bookmark icons for the mobile site.
The ‘Web-app Mode’ and ‘Advertising’ tabs are available in the pro version only.
Menus
To configure the mobile menu, go to the WPtouch > Menus page. In the ‘Theme Menus’ tab, you can choose which menu to use and whether you want to use menu icons or not.
The ‘Menu Icons’ tab lets you customize the icons for the menu items. By default, the plugin comes with some ready-made icons. To use any of them, drag the icon over the old menu icon.
You can also upload your custom icons by going to the ‘Icon Upload & Sets’ tab.
After making all the changes, click ‘Save Changes’. To see a preview of your mobile site, click the ‘Preview Theme’ button. And ‘Reset Setting’ does what it sounds like.
Here’s the preview of the mobile version of my site:
Final Words
So, that’s how you create a mobile version of your website by using WPtouch Mobile Plugin. Let me know if you have any questions about using the plugin.
Are you using the plugin currently? If yes, please share your experience with us. And if you are using any other plugin for creating the mobile version of your site, let us know the name by leaving a comment below.