Enable Keyboard Navigation for Single Posts in WordPress

As a keyboard shortcut addict, I like when I’m able to go quickly through blog posts of a website using the left and right arrows keys. I find that keyboard navigation is particularly useful on photo blogs for instance.

Below is the PHP code to enable keyboard navigation for single posts in WordPress.

	<?php

	//* Euqueue keyboard navigation script
	add_action( 'wp_enqueue_scripts', 'customprefix_add_keyboard_navigation' );
	function customprefix_add_keyboard_navigation() {
	if ( is_single() ) {
	wp_enqueue_script( 'keyboard-navigation', get_bloginfo( 'stylesheet_directory' ) . '/js/keyboard-navigation.js', array( 'jquery' ), '1.0.0' );
	}
	}

view raw enable-keyboard-navigation.php hosted with ❤ by GitHub

Below is the JS code to enable keyboard navigation for single posts in WordPress.

	jQuery(document).ready(function() {
	jQuery(document).keydown(function(e) {
	var url = false;
	if (e.which == 37) { // Left arrow key code
	url = jQuery('.pagination-previous a').attr('href');
	} else if (e.which == 39) { // Right arrow key code
	url = jQuery('.pagination-next a').attr('href');
	}
	if (url) {
	window.location = url;
	}
	});
	});

view raw keyboard-navigation.js hosted with ❤ by GitHub

Alternatively, you can download and install WP Keyboard Navigation from the WordPress Plugin Repository. Also, if you are interested in further control of the previous/next links displayed on single posts, you might want to have a look at the WordPress Codex here and there.

Skip links