A Basic Guide - on Adding Gestures to WordPress Website

Users are increasingly getting accustomed to navigate a website with taps and swipes. But when you'll jump out of an app and access browser via a tablet probably you'll start swiping to navigate around some site – only to find that it doesn't work. This is particularly the case with tablets that can be used to access standard sites, while you can access mobile-friendly sites via Smartphones.

Getting Started

So, adding gesture support to your WordPress site can make it tablet friendly. Unfortunately, WP themes don't support gesture but you can add such support to your current WordPress powered site with a number of javascript-base solutions.

Let's have a look at some of the gestures that you need to implement in your site for mobile users:
Swipe Left – to navigate to the next post
Swipe Right – to navigate to the previous post
Double Tap – to move to the page of your choice (by default the page is your website home page)

The ability to swipe largely depends on on the “prev” and “next” tags that are added to the WordPress header file. So, if your theme is not displaying these tags then most likely your theme doesn't contains the wp_head function or is not calling the function. Also, the output of the “prev” and “next” links may be disabled.

Wondering about the solution?

Well, the solution to your problem lies in a plugin, so let’s first understand about the plugin that helps to add gesture support to your site and how it can be used.

Setting up a Plugin to Add Gestures

The plugin here we're talking about is Wp-Gestures. Installing the plugin help users to enable a feature in their WordPress site that allows using mouse gestures to move to the next post or the previous one or return back to the home page, as shown in the following screen shot.

Let's begin with the process of installation.

Step 1 – Plugin Installation

You can install the Wp-Gestures plugin from GitHub, and then upload it to your WordPress site. Next, open your WP dashboard go to Plugins>>Add New, and activate the plugin.

Step 2 – Changing The Settings

You might want to make some changes or updates to the plugin settings. For this purpose, go to Settings>>Gestures and you’ll find 2 settings as shown in the image below:

Look at the image above, there are two options. The first one contains the container where the gestures will be detected. For instance, let's say you want to make a gesture visible anywhere on a page, then you'll probably like to use some containing element after the body tag, in general, #page. But if you just want to add gestures in the body text (content excluding the header), then you'll certainly want to use #content.

The second option enables to add the page that will be displayed when the user double-tap on the device screen.

You can change the options as per your requirements and click on “Save Changes”.

Step 3 – Don't Forget to Test!

Now that you've installed the gesture plugin and updated its stetting, go to your website and test whether the gestures are working or not. The test can be performed in 3 ways as listed below:

Simulator: You can view your website in a mobile simulator such as iOS Simulator, and imitate the taps and swipes just like you do on desktops.

Handheld devices: Certainly the most viable way to test whether the gestures are working or not requires testing on a handheld device. You can access the site via your handheld device, and then perform the gestures by simply tapping and swiping the screen as normal.

Check out the Desktop: When viewing a site via desktop, try to swipe the screen by pressing the mouse button and then drag the cursor to left or right; or just make a double click.

No matter, which device you're using for testing, make sure that you're able to swipe the screen left and right that navigates you in-between the posts, while a double-tap will take you the page (that you specified in Step2).

Conclusion

More and more people today are making use of mobile devices, such as the Smartphones and tablets, to view websites. While accessing a site via mobile devices, users develop a habit to swipe and tap the device screen.

Although, Smartphones provide access to mobile-friendly sites, tablets display standard sites. Thus, it becomes necessary to make tablet-friendly sites that support gestures. You can build a WP site with gestures by using a plugin and can even test whether it works or not, as discussed above in this post.