Today, we will go through how to setup using gestures to navigate through your WordPress posts. It’s really simple, so let’s dive in!
Introduction
As we are moving forward in responsive website design and the number of users visiting websites on mobile devices is increasing, it’s a good thing if we can make our website work with amazing technologies such as gestures. We will be using a jQuery library to achieve this along with some good ol’ PHP and WordPress.
The demo is a stripped down theme which has been created for just the purposes of this tutorial.
So open up your favourite text editor and let’s begin!
Step 1 Registering / Enqueuing Our Scripts
We will be using an excellent jQuery plugin to create our gesture navigation called Hammer.js. They provide us with all the functions to use different kinds of gestures within our websites.
Let’s begin by getting all the necessary files we need for gestures to work. You can either download the files locally to your machine or use their online version.
We need to enqueue the following scripts:
We will enqueue these scripts within our “functions.php” file. My preferred method is to first create a function to register and enqueue each script inside of this function. This would look something like this:
function vsgt_enqueue_scripts() {
// Register Hammer.js from external link
wp_register_script( 'hammer', 'http://eightmedia.github.com/hammer.js/hammer.js' );
// Register jQuery Hammer from external link
// Set jQuery and Hammer as dependencies so that we only enqueue this and we get them all
wp_register_script( 'jquery_hammer', 'http://eightmedia.github.com/hammer.js/jquery.hammer.js', array( 'jquery', 'hammer' ) );
// Enqueue our scripts
wp_enqueue_script( 'jquery_hammer' );
}
add_action( 'wp_enqueue_scripts', 'vsgt_enqueue_scripts' );
Next, we need to create a blank JavaScript file which we will later use to write the gesture script. Create a file, and register and enqueue it in the same function we just used to register and enqueue all our other libraries and scripts:
// Register our Custom JS Script wp_register_script( 'custom_js', get_template_directory_uri() . '/js/jquery.custom.js', array( 'jquery_hammer' ), '1.0', true ); wp_enqueue_script( 'custom_js' );
If you are not confident with enqueue'ing scripts then follow this tutorial: How to Include JavaScript and CSS in Your WordPress Themes and Plugins
Step 2 Setting Up Our Navigation
Now that our scripts are in place, we need to ensure that we can navigate back and forth when reading a single blog post. We do this by inserting the following code within our WordPress Loop inside our "single.php" file:
<div class="primary_navigation">
<span class="nav-previous"><?php previous_post_link('%link') ?></span>
<span class="nav-next"><?php next_post_link('%link') ?></span>
</div>
We wrap our navigation within a div for better management and styling flexibility, and then use a span to wrap around our next and previous links which are generated by WordPress. We wrap it with span classes, so that we can target the links directly which we will need to use later. You can read more about the next and previous functions in the WordPress Codex.
Finally, we need to go to our opening <body> tag and apply a class to it. I will be adding a class of "gesture" to the body_class() function: <body <?php body_class( 'gesture' ); ?>>. We apply a class to the body tag because we will later use it in our JavaScript file where it will act as our container for checking if the user has swiped their finger for navigation.
Step 3 Writing Our Gesture Script
Now that our navigation is set up, it should allow you to navigate back and forth when reading a single blog post. Next we need to write our JavaScript to make navigation with gestures. Let's begin by opening up our blank JavaScript file which we created earlier and create a function. Your document should look something like this:
jQuery(document).ready(function($) {
function runGesture() {
// Our code will go in here
}
});
Next we are going to create some variables. Insert the following code within our runGesture function:
// Set our gesture container variable var gestureContainer; // Set our variable to be 'hammered' var hammeredGesture;
Following this, we are going to assign the variables to their appropriate tasks. We will be using gestureContainer to assign the class on the body tag, and we will then initialise the Hammer.js plugin on our hammeredGesture variable. Insert the following code into our runGesture function and our code should look like this:
// Assign our container to the ID
gestureContainer = $('body.gesture');
// Hammer our Gesture
hammeredGesture = $(gestureContainer).hammer();
Now that we have our fundamentals set, we can move on and bind our gesture event to our container which has been initialised with the Hammer.js plugin. We do this by running the bind function onto our hammeredGesture variable and pass the gesture event; specifically we will be using the "drag" event. Then open a function where we will write all of the handling for the gesture event. Insert the following code into our runGesture function:
// Bind our Hammer to the event we want to run
hammeredGesture.bind("drag", function ( evnt ) {
// Here we will handle the code for the drag event
});
We will now handle the navigation part. Inside our bind function, we create a variable called url. This will be used to get the href value from the next and previous links. We will also test if we are dragging left or right, depending on the direction we are dragging we will pass the href value to the url variable. Finally we will check if there is a value for the url, and if there is, we will redirect the window to the value of url. The following code should display this:
// Set up a URL variable and set it to false
var url = false;
/*
Test if the direction we are swipeing is right
if TRUE then get the span with class 'nav-next'
and pass the href link to the URL
*/
if ( evnt.direction == 'right' ) {
url = jQuery('.nav-next a').attr('href');
}
/*
Same as the right key but change the value
of the URL to get the previous link
*/
if ( evnt.direction == 'left' ) {
url = jQuery('.nav-previous a').attr('href');
}
/*
If the URL has a value then change the get
the window and pass the URL location to it
*/
if ( url ) {
window.location = url;
}
That's all of our gesture script done and complete along with the navigation. We just need to do some browser detection to ensure that the script only runs when we are on a mobile device.
Step 4 Browser Detection
WordPress allows us to detect what page the client is viewing by using the body_class which is great for styling and cross browser compatibility, but we are going to expand this a little and add browser detection to it. Thanks to Nathan Rice who has already written what we are looking for. Ensure that you are applying the body_class to your body tag as we did above and then open up our functions.php and insert the following code:
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';
if($is_iphone) $classes[] = 'iphone';
return $classes;
}
add_filter( 'body_class', 'browser_body_class' );
Step 5 Initialisation
Great! Now that we have browser detection in place, along with all the complete gesture script and our navigation completely finished. Let's go back and open our custom.jquery.js and insert the following code outside of our runGesture function:
// Only run the gestures on an iPhone or mobile device
if ( $('.gesture').hasClass( 'iphone' ) ) {
runGesture();
}
The code we just inserted does one final test to check if we are on a mobile device and if we are then run the gesture script, otherwise do nothing.
That's it! Simple right? You can swipe left and right on your mobile devices through posts and your WordPress site will run perfectly normally on desktops! Have fun playing around with the different events.
I would like to say a HUGE thank you for spending the time to read my tutorial, I hope it helped. Please feel free to leave comments and I will try my best to assist and answer them. If not, you can always contact me directly through my website: www.VinnySingh.co
Comments