Advertisement
Tips

Quick Tip: How To Use Gestures To Navigate WordPress Posts

by

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

Related Posts
  • Code
    Theme Development
    How to Pass PHP Data and Strings to JavaScript in WordPressPhp js 400
    It's good practice to put all your data in static strings in your PHP files. If you need to use some data in JavaScript later on, it's also good practice to put your data as data-* attributes in your HTML. But in some certain scenarios, you have no choice but to pass strings directly to your JavaScript code. If you are including a JavaScript library, and you've found yourself initializing a JavaScript object inside your header.php then assigning data to its properties, then this article is for you. This article will teach you on how to properly pass PHP data and static strings to your JavaScript library.Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Plugins
    Using HighCharts in WP-AdminHighcharts 400
    Charts are a great way to present data. They make data more digestible by making it visually appealing. In WordPress, there is no built-in method for getting posts and pages data in a graphical form. Although, there are certain plugins available which integrate Google Analytics with WordPress, but they are overkill if you want to get only a portion of that data. Also, nothing should keep you from learning new techniques and to dive straight into the subject is the best way to learn.Read More…
  • Code
    Theme Development
    How to Integrate Bootstrap Navbar Into WordPress ThemeBootstrapd 400
    Have you ever wanted to speed-up the process of theme development? I assume the answer is "yes" and you already know about Bootstrap and use it in mock-ups for development. This raises the question: "How can you integrate Bootstrap components into a WordPress theme?"Read More…
  • Code
    Cheat Sheets
    The Complete Guide to Proper JavaScript Usage With WordPressJavascript 400
    I remember thinking "What the heck do we need JavaScript for, when we have Flash?" when I was fourteen. Although I still remember how I enjoyed coding stuff with ActionScript 2.0 back then, I saw how much one can achieve with JavaScript and fell in love with it. I'm not an expert on JavaScript (yet) but I can say I'm over and done with Flash for a long time. When it comes to WordPress, the biggest blogging platform and content management system worldwide, JavaScript is - of course - very useful for many things: content sliders, lightbox galleries, slick shopping carts, UI elements like tabs or accordions... you name it. But how exactly should we use JavaScript with WordPress? Returning or echoing a bunch of HTML script elements is one way to do it - and it's wrong. In this tutorial, we're going to see how to enqueue JavaScript files inside our pages and how to pass translatable data to the JavaScript code.Read More…