Easily Add Gesture Support to Your WordPress Site

Google has been emphasizing the importance of mobile content over the past few years. If you are a webmaster, it is really important for your website to be mobile-friendly unless you are not concerned about the traffic coming from mobile devices, which could easily make up 30% of the overall traffic.

One important factor of the mobile device is its small screen (as compared to a desktop), which is why responsive web design has become a popular solution to make the website render well in various screen sizes. Another factor that has been overlooked by webmasters is the support for gestures. Most, if not all, mobile devices these days make extensive use of gesture actions (swipe, pinch, double tap, etc.) whereas most websites are still using the conventional mouse point and click way to navigate the site. In this article, I am going to show you how you can easily add gesture support to your WordPress site.

Tocca.js is a very simple javascript that can detect gesture action like “tap,” “double tap,” “swipe up,” “swipe down,” “swipe left.” Unless you are a developer, you won’t know what to do with it. This is where the Gestures plugin comes in. It makes use of the Tocca.js script and adds gesture support to your site.

1. Download Gestures from its Github page. Extract the archive and upload the folder to your WordPress plugins directory.

2. Activate the plugin in the Plugins section of WordPress.

3. Go to “Settings -> Gestures.” This is where you can configure the settings .

wp-gesture-settings

The “Content container identifier” field is the area on the site where you want the gesture to be activated. It is usually set to the main content div. For example, for our theme, the main content resides under the class="content" div, thus we will enter .content in the Content container identifier field.

For the next field, enter the URL where the user will be redirected to when they double tap on the site. This is usually set to the Home page of the site.

4. Once you are done, click “Save Changes.” That’s it. You can now load your site on your mobile and test out the swipe left/right action.

1. The Gestures plugin depends on the prev/next tag on your theme header to work. Some themes are known to strip off these tags as they are not useful in most cases. WordPress SEO and several other plugins are also known to strip off these tags. If you can’t get Gestures to work, this is probably the reason.

One of the ways to tackle this is to add back the prev/next tag in your theme header. To do this, open up the functions.php file in your theme folder and add this line at the end.

2. If you are not sure of the content container identifier for your theme, you can make use of the Developer Tools in Google Chrome to find the container div. In Google Chrome, right click on the main content area and select “Inspect Element.” The Inspector window will show up and highlight the current location where you click. Scroll upward to find its parent div. That will most probably be the container that you are looking for.

wp-gesture-find-container-class

3. To test the gesture action on desktop, simply click and hold your mouse and drag left/right. This is equivalent to swiping left and right on the mobile.

That’s it. Try it out and let us know if this works for you.

9 comments

  1. arrggg… it swipes the opposite way as Imgur, any way to reserve the post direction when swiping?

  2. Hii, the swipe left right feature works seamless on my desktop when I try that with my mouse, but it doesnt work on the mobile phone, though the double tap feature works on phone as well.

  3. The plugin works well. What I would like to do is limit the swipe to categories. Currently, the plugin seems to allow swiping based on page format defined in the template. So it navigates between all posts with an image format, then between posts with gallery format, etc. Is there a way to do this?

    • WordPress tend to set “category” class on each Category page, so instead of .content, you can try .category .content under the Content Container Identifier field.

  4. I tried your suggestion with no luck. There is not a category class referenced on the page. The template uses next and prev links that are limited to category. I tried to edit the init.js to pull the href from the #id for those links. But I really don’t know jQuery. Any help would be appreciated.

    jQuery(document).ready(function($){

    $(gestures.container).on(‘dbltap’, function(){

    jQuery(location).attr(‘href’, gestures.destination );

    }
    ).on(‘swipeleft’, function() {

    if ( $(‘#next-post’).lenght) {

    jQuery(location).attr(‘href’, $(‘#next-post a’).attr(“href”));
    }

    }
    ).on(‘swiperight’, function() {

    if ( $(‘#prev-post’).lenght) {

    jQuery(location).attr(‘href’, $(‘#prev-post a’).attr(“href”));
    }

    }
    );

    });

  5. It doesnt work on the default Android Browser or Ipad/ I-phone, works on Chrome but no t on default browsers..

Comments are closed.

Sponsored Stories