Keyboard Navigation for WordPress Posts

One of the topics on the WordPress Forum asked about adding a snippet of JQuery to a theme, the snippet of code was to navigate the posts using the left and right arrow keys.

We were able to quickly create a child theme and test the code and it works well, we thought we would share the solution and child theme with our readers.

Twenty Eleven JS Navigate

The JQuery

We took the example code and created the function lines which are the first and last lines, we also changed the class names to .nav-previous and .nav-next, these are the posts navigation classes.

We created a folder in our twenty eleven child theme called /js/, inside the folder we created a new file called jquery.navigate.js inside this folder, and we add this code block.

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

Now we have the JQuery file we need to load this in our themes functions.php, so we add this small block of code.

/* Add the Javascript */
$path = get_stylesheet_directory_uri() .'/js/';
wp_enqueue_script('post-navigation', $path.'jquery.navigate.js', array('jquery'));

That is all there is, we now can navigate our posts with the keyboard arrow keys, a nice neat little function for us to add to our code library.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

One thought on “Keyboard Navigation for WordPress Posts

  1. Hi and thanks for the useful tip.
    I’m looking for something similar that would allow navigating between numerous images within a single post using keyboard arrows.
    Any idea ?
    Thanks and regards,
    Jean

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More