Add Previous and Next Post Links in WordPress
When you’re building a WordPress theme, or customizing one, it is important to consider usability. People want easy access to the next available content. Sometimes they’ve gone too far and they need to go back and review something they had previously viewed. You want it to be as easy as possible to move around your website. Anytime that someone has difficulty or they hit a brick wall, you run the risk of them closing the browser and never coming back. It is always a smart idea to add previous and next post links in Worpress.
It isn’t difficult to do this, because you actually only need about 2 lines of code to do this. below are the 2 lines of code you need:
<?php next_post_link('Next Post »') ?>
<?php previous_post_link('« Previous Post'); ?>
The first part is PHP, of course and is at the start of just about everything that you will do. “next_post_link & previous_post_link” are in front the the parenthesis and they actually get the link to the post that is chronologically before and after the currently viewed post. Inside of the parenthesis is a set of single quotes. This is where you will specify words that will be visible, but the code won’t be. This is where you see previous and next posts, which will appear as live text, and not code. ” » and «” will create forward and backwards arrows for your links. This simply creates a visual cue to emphasize forward and backward.
You would want to place this in the content section, but outside the WordPress loop. If it is placed inside of the WordPress loop, you may experience these links showing up on each post. Below is a link more advanced version of what you will see:
To enable the actual post title, all you have to do is change the words to code instead. Adding the percent sign will enable this capability. So instead of dedicated words, you’ll pull in the previous and next posts’ titles automatically, customizing your link on the fly. This may entice readers to click the next link, since they’ll know what it is by reading. Below is the snippet you’ll use for this:
Wrap them in list-item tags to create tham as lint items, making them easier to style. What do you think? Do you have any questions about how to add a previous and next link in WordPress? If So, Leave your thoughts and questions in the comments section below.