Add Prev Next post link to wordpress blog

Some of the themes of wordpress dont come with previous/next post links when viewed in single post mode. This can be quite frustrating for the readers [it sure was for me]. My theme is “Magazine Basic” and it doesnt have previous/next post links.

To add these links to my theme I tried Bobs simple navigation plugin. But the issue with this plugin is that, It just displays the post title as a link confusing the users what that link is about. There is a hover feature that tell the link details but it take more than 2-3 seconds to be visible.

I tried a lot and ultimately found the solution here. I did a little customizations. Following are the steps how to go about it along with my customizations.

First you need to have access to the directory which holds your wordpress files.

Navigate to <blog dir>/wp-content/themes/<your theme>/single.php

and edit it. Add the follwing code where you want it to be visible. I added it twice to make it appear at top and bottom of the post.

<?php if($single) { ?>
<div>
<span><?php previous_post('&lsaquo;&lsaquo;&lsaquo; %', 'Previous Post', 'no', 'no'); ?></span>
<span><?php next_post('% &rsaquo;&rsaquo;&rsaquo;', 'Next Post', 'no', 'no'); ?></span>
</div>
<?php } ?>

This would just show the text you want to display for the links.

<?php if($single) { ?>
 <div>
 <span><?php previous_post('&lsaquo;&lsaquo;&lsaquo;  %', 'Previous Post', 'yes', 'no'); ?></span>
 <span><?php next_post('% &rsaquo;&rsaquo;&rsaquo;',  'Next Post', 'yes', 'no'); ?></span>
 </div>
 <?php } ?>

This would show the name of the post too along with the text.

As you can see both links are differently styled… It depends upon the style defined for that region in the css.

One last step.

The above code wont show any results unless you define the details in the css file located at Navigate to

<blog dir>/wp-content/themes/<your theme>/styles.css

Edit this file and add

.nextprev {
 height: 1.5em;
}
.nextprev .prev {
 float: left;
}
.nextprev .next {
 float: right;
}

Tags: links, previous next, single post, wordpress