There are lots of ways to detect in-browser touch events on mobile devices, but we are going to look at the humble swipe event to navigate posts in your wordpress instillation.

First I’m going to assume you have your wordpress theme set up, and have optimised your theme for viewing on mobile devices. If not you might want to take a look at this post by Nettuts.

To make our coding a little simpler, we are going to include jQuery first, then we are going to use a simple, standalone library to invoke the tap event for touch-friendly web browsers. This library was developed by Lim Chee Aun, and can be found on git hub. Download it and include it in your theme after jQuery.

Next we need to delegate our tappable element and axis variables. In this case as we want our swipe event to be applied anywhere on the page we are going to use <body> as the element.


var swipeArea, moved, touchX;

swipeArea = document.querySelector('body');
 moved = false;
touchX = 0;

NOTE: If you want the swipe to fire your event on a particular area, simply change (‘body’) to whichever location you need.

Ok, next we need to set variables for our next and previous post links. In wordpress this is super simple using wordpress, but to be sure we catch the correct next/prev links lets get the current category name using php, then query the previous_post_link() and next_post_link() using the result. We will also use $category[0] to make sure we use the first category name in case the current post is in multiple categories.


<?php $category = get_the_category();
$the_cat = $category[0]->cat_name; ?>

Now lets create the links for next and previous posts just to allow for both types of navigation. Lets put our links into containers with classes we can use in our javascript.


<div class="prev_link"><?php previous_post_link('&laquo; %link','%title','',$the_cat) ?></div>
 <div class="next_link"><?php next_post_link('%link &raquo;','%title','',$the_cat) ?></div>

Then add these links to our list of javascript variables:


prevLink = $('.prev_link a').attr('href');
 nextLink = $('.next_link a').attr('href');

Great! Now on to creating our touchstart and touchmove functions. First we must create a touchstart function to define the first touchX location on our web page.


swipeArea.ontouchstart = function(e) {
touchX = e.touches[0].clientX;
};

Next we set up our touchmove function to detect if the swipe is from left to right, or right to left as well as use our prev/next post links to navigate.


swipeArea.ontouchmove = function(e) {
    dir = e.pageX;
    diff = startX - dir;
    if (Math.abs(e.touches[0].clientX - startX) > 100){
        moved = true;
        if (diff > 0){
            window.location.replace(nextLink);
        }
        if (diff < 0){
            window.location.replace(prevLink);
        }
    }
};

The dir variable detects our swipe location, and we use this to subtract from our start location. This will either return a positive of negative integer. So from this we can detect if the swipe was from left to right (negative) or right to left (positive). Then it’s a simple solution to take the next/prev variables which are links, and add them to the window.location.replace function.

There you have it, a working swipe function that will take you to the next or previous links in the current category.

Obviously this can be extended for many applications so have fun with it guys.