How to Add Next and Previous Links on Single Post Page

How to Add Next and Previous Links on Single Post Page. It is always good to have better navigation links on the blog. One such practice is to add “Next and Previous Posts Links” at the end of the post. After reading an article, readers will try to explore more from your blog and at this point related posts are really useful.

Apart from related posts another simple yet powerful approach is to include links to “Previous” and “Next” posts. These links are also known as “Post Navigation Links” and follow this tutorial to add them to your blog.

Add Next & Previous Links on Single Post Page

Code used to display Next & Previous links is available at Codex and we modified a bit of it, so that additional CSS classes and some functionality can be included.

If you are using a normal WordPress theme like Twenty Ten or Twenty Eleven, then follow these steps. If your blog runs on Thesis and Genesis Frameworks, do check the below guides.

• Login to WordPress Dashboard and go to “Theme Editor”.
• Find single.php file and open it in Editor.
• Add below code at the end of it and click on “Update File Button”.
• That’s it, now next and previous post links will be displayed.

/** Add Previous & Next Links in Single Post Page */
<div id="prev-next">
<div class="prev-link">&larr; Previous Post
<?php previous_post_link('%link', '%title'); ?>
</div>
<div class="next-link">Next Post &rarr;
<?php next_post_link('%link', '%title'); ?>
</div>
</div>

You need to add some styling to these links, so that they will be aligned properly and makes this whole thing attractive. To do so, check out the last part of this article.

Check :How to Disable or Limit Post Revisions in WordPress

Add Next & Previous Links in Genesis Theme

Same code will be used for Genesis Theme also, but the entire code will be wrapped up in a “Hook”, so that the links can be added at desired position on the single post page.

• Login to Dashboard and go to “Appearance Menu”.
• Open functions.php file in theme editor.
• Add below code in the end and “Update” it.
• Move on to 2nd step, i.e add CSS to the links.

/** Add Previous & Next Links in Genesis Single Post Page */
function genesis_post_navigation() {
if ( is_single ( ) ) { ?>
<div id="prev-next">
<div class="prev-link">&larr; Previous Post
<?php previous_post_link('%link', '%title'); ?>
</div>
<div class="next-link">Next Post &rarr;
<?php next_post_link('%link', '%title'); ?>
</div>
</div>
<?php
} }
add_action('genesis_after_post_content', 'genesis_post_navigation');

Recommended: Thesis 2.0 Release Date and Features List

Add Next & Previous Links in Thesis Theme

Similar to Genesis, code will be added to “Hook”. If you are new to Thesis Theme checkout our previous articles that will guide to customize thesis without any hassle.

• Login to Dashboard and go to “Appearance Menu”.
• Open custom_functions.php file in theme editor.
• Add below Code to it and “Save the File”
• Now, its time to add styling to the links.

PS: This functionality is available in Thesis by Default. If you want further control and great look, then try this one. Otherwise, no need to use this code.

/** Add Previous & Next Links in Thesis Single Post Page */
function thesis_post_navigation() {
if ( is_single ( ) ) { ?>
<div id="prev-next">
<div class="prev-link">&larr; Previous Post
<?php previous_post_link('%link', '%title'); ?>
</div>
<div class="next-link">Next Post &rarr;
<?php next_post_link('%link', '%title'); ?>
</div>
</div>
<?php
} }
add_action('thesis_hook_after_content', 'thesis_post_navigation');

Also Check: How to Add 3 Column Widgetized Footer to Genesis

Add CSS to Next & Previous Links

Here come the final and the most important step, adding CSS to the links. This is common for all the 3 cases discusses above and you need to add below code to style.css file. If you are using Thesis, then add this code to custom.css file and save.

/** CSS for Previous & Next Post Links in Single Page */
#prev-next {  float: left; margin:10px;}
#prev-next .prev-link {float: left;width: 50%;text-align: left;}
#prev-next .prev-link a {float: left;text-align: left;}
#prev-next .next-link {float: right;width: 50%;text-align: right;}
#prev-next .next-link a {float: right;text-align: right;}
#prev-next a{text-decoration: underline; }
#prev-next a:hover { text-decoration: none; }

Hope you like this awesome tutorial and if you got any query regarding this, simply drop a comment. We will get back to you soon, meanwhile subscribe to our Feeds.