Keyboards are great when you think about it (hear me out for a second) - they let you type nearly anything, but they can also be used for things that you'd normally not think keyboards could be used for; a primary example is navigation on a webpage.

Let's paint a picture to better describe the situation - you're on a blog and you've clicked on a post that you want to read. But, you want to be able to go to the next post (and back), both quickly and efficiently. On a majority of blogs, you'd have to go back to the homepage and select the next article (or maybe there are "next" and "previous" links handy for you). However, this process could be simplified using the keyboard.

We're going to show you how to integrate keyboard navigation on a WordPress-based website using only a few lines of JavaScript.

First, copy the code below into a text editor:

<script type="text/javascript"> $(document).keydown(function(e) { var url = false; if (e.which == 37) { // Left arrow key code url = $('.prev').attr('href'); } else if (e.which == 39) { // Right arrow key code url = $('.next').attr('href'); } if (url) { window.location = url; } });</script>

Let's examine this code briefly - each "if" case that you see above is for a different button on the keyboard that we'd like to use. The numbers after the "==" in each if statement are the key codes for the specific keys on the keyboard (for example, the left arrow key is 37, while the right arrow key is 39). A link is available in the Resources section of this tutorial that displays all of the key codes that you may need. Moving on, the "url = $('.prev').attr('href');" portion looks for a CSS class on a <a href=""></a> on the same page, which houses the next and previous post links. For example, the class in this case is called "prev" and "next."

Modify the code above to suit your needs, but if you're going to be using this for navigation between next and previous posts, we recommend keeping the same code. Continue adding "else if" blocks to the code for more keys.

Once you have your code finalized, open an FTP client and navigate to your current theme's folder (usually located in /wp-content/themes/CURRENT THEME NAME). Find the header.php file, open it in a text editor, and paste in the JavaScript code right before the </head>. Save the header.php.

Next, find the single.php file in the same folder and open it in a text editor as well. Copy and paste the following code before the <?php get_footer();?> line.

<ul style="display:none">    <li class="prev">        <?php previous_post_link('%link', 'Previous'); ?>    </li>    <li class="next">        <?php next_post_link('%link', 'Next'); ?>    </li></ul>

Save the single.php file and close the text editor.

Once you do this, go to your website and click on a post to enter the single post page. From there, try hitting the left and right arrow keys and you should notice that you can now navigate through articles via your keyboard!

If you have any questions or run into any issues, please leave a comment below and we'll look into it.

Resources