Don’t Make Your Mobile Users Think: Support Gestures On Your WordPress Site
Many tablet and mobile users are app-trained to expect swipes and taps to result in navigation.
Many WordPress themes don’t include gesture support out-of-the-box but it’s actually surprisingly easy to add to an existing site.
Let me show you how to let your mobile visitors navigate your site with taps and swipes.
We all do it. You’re jump out of an app and into your tablet browser and you start swiping – to no avail – in a vain attempt to navigate around a website and, of course, it doesn’t work. This is particularly prevalent with tablets as they tend to served the standard site far more often than smartphones which will often get a mobile version of the website.
I’m going to show you how to implement the following gestures using the Tocca library:
- Swipe Left – go to next post
- Swipe Right – go to previous post
- Double Tap – go to a page of choice (default is the home page)
The swiping does depend on the prev and next tags that WordPress generally adds to the header. If your theme is not outputting this tags then chances are that your theme is not calling the wp_head function or that it has disabled the output of these links.
The solution is wrapped up in a plugin, so first let’s go through how to use the plugin and then we’ll go through how it works.
Setting Up Gestures
Step 1 – Install The Plugin
Download the plugin from GitHub and upload to your WordPress site in Plugins > Add New. Activate the plugin.
Step 2 – Updating The Settings
If you navigate to Settings > Gestures you’ll find 2 settings:
The first option is the container within which the gestures will be detected. If you want a gesture anywhere on the visible page to be actioned then you’ll want to use the id or class of the first major containing element after the body tag (generally #page).
If you only want the gestures in the actual content (excluding the header for example) then you’ll probably want to use something like #content.
Of course, it all depends on how your theme is written so you may want to delve into the HTML or the header.php theme file to find out more.
The second option is the page to display when the user double-taps. This defaults to the site url but can be any url and will depend on your needs.
If you change the options then be sure to click on Save.
Step 3 – Test!
That’s actually all there is to it, so jump into your site and test it. You can test in one of 3 ways:
- Desktop: simulate a swipe by holding down the mouse button and dragging left or right; rapid click for a double click.
- Simulator (i.e. iOS Simulator): view your site in a mobile simulator and simulate the swipes and taps as describe for desktops
- Handheld: obviously the best way to test is with an actual handheld device. If you can get to the site using a handheld then do so and tap and swipe as normal
You should find that swiping left and right navigates you between posts, whilst a double-tap takes you to the page you specified in step 2 (or the home page if you left the options unchanged).
How It Works
As I mentioned, this solution makes use of the Tocca jQuery plugin to capture the gestures and is almost entirely a client-side solution.
The plugin is, therefore, pretty small and uninteresting (it also handles the new Settings > Gestures page) so we’ll just focus on the initialization script.
As I mentioned, the localize_script function is used to pass the settings to the initialization script, with the output looking something like this:
The initialization script then simply adds the Tocca gesture event handling for double-tap (dbltap), swipe left (swipeleft) and swipe right (swipe right) to the container:
As you see, not very complicated at all. The double-tap action is simply to change the URL to the passed destination whilst the swipe actions simply look for the relevant link tag and change the URL to the href.
If there is no prev or next link (such as on the homepage) then no action is taken.
Don’t Make Mobile Users Think!
The rise of mobiles, and particularly tablets, at the expense of desktops means that the lines between between app behavior and website behavior continue to blur.
Users love consistency and shouldn’t really have to change their behavior just because they are in a browser and not in an app.
As this solution shows, it’s entirely possible to let your mobile visitors have their cake and eat it. Without even thinking about it.