How to add Keyboard Navigation to your WordPress powered website
- Monday, October 14, 2013 By Ramya Santhosh
Keyboard navigation make visitors experience at websites more easy and faster. I saw few websites with Keyboard navigation and found it was quickest and thought to implement it on my website too. Below i will be showing you how you also could implement it on your website powered by WordPress.
Step 1 : Create two hidden div’s which hold links to previous and next posts
Open the single.post.template.html file under theme template folder and add the below code after the content.
<div class="prev" style="display:none;">
); ?></div> <div class="next" style="display:none;">
Step 2 : Using native keydown() method of jQuery
Using jQuery, bind the key-down event to a function that extracts the required URL from one of these above created hidden links and injects it into the browser’s address bar, loading the new page. On key-down, check whether the key pressed is right arrow (39) or left arrow (37), extract the corresponding required URL from above created hidden links and load the new URL. Add the below code to the same single.post.template.html file after the above Step 1 code is inserted :
Go ahead, try it. Hit the left-arrow ← to view the previous post and right-arrow → to view the next post. You’ll be amazed at just how quickly you can navigate through the posts.