WordPress Tips : How to Add Next and Previous Post Links to Blog?

Adding Next and Previous Post Links in your individual post page of your wordpress blog will help your readers to find more blog posts and article. Not only that, if the user visits those pages, that will increase the average page view per user.This helps to reduce your sites bounce rate and will improve your sites reputation and search engine visibility.

Most of the wordpress themes provide this “Next and Previous Post Links” feature by default. But if you want to add these links wherever you want, then this guide is for you. Here we will discuss about how to add the links to Next and Previous Posts in your wordpress post page.

How to add Next and Previous Post Links

The ordering of the blog posts in wordpress is based on the post time. It displays posts starting from the newest and proceeding backwards in time.
This means that “Next” would be moving backwards in time, means,  would move to older posts.

The two different two sets of tags to implement Next and Previous Links

WordPress provides two inbuilt function tags to get next and previous links.

1. posts_nav_link()

This function displays both the Previous and Next links. You can use this function to display Next and Previous pages. This tag Normally used in non-single/non-permalink web pages, such as categories, archives, searches, and the index page. But this is not the one we are looking for.

2. The Next and Previous Posts links using previous_post() and next_post()

These are the functions we use to display links to Next and Previous posts. These tags are used typically in single/permalink post, such as any single post or article you have published on your site or blog.

Using previous_post() and next_post() tags

If you know PHP programming then it is quite easy to use this. If you don’t know PHP ,don’t worry, you can just copy and paste the piece of codes below and paste in your template files where you want the next and previous links to appear.
The most simple use of tag is given below.

1

<?php previous_post(); ?>    <?php next_post(); ?>

This will appear as below. ( I have applied some styles to it !)

previous_post() and next_post() Tag Parameters

Both these functions accepts three different parameters.

• format

The default value is the permalink. Text used in combination with the ‘%’ to represent the permalink to the post. You can supply some text and that text will be combined to create the permalink.
For example previous_post(‘Previous: %’, ”, ‘yes’); This displays the previous post titles with “Previous” text as shown below.
Previous: Download Video in Different Formats

• text

If you want to display some text before the permalink you can use this parameter. If you don’t use this, the default value is “next post” and “previous post”. See example below.
previous_post(‘« « %’, ‘My Previous Post: ‘, ‘yes’);
This displays the previous link with “My Previous Post” text before the permalink.
« « My Previous Post: Download Video in Different Formats

• title

This turns “on” and “off” the use of the post title to be used as the link text. By default, is it “yes”. If set to “no”, then only the text set in the text parameter and format would show. In our examples above we have used the parameter ‘Yes’ to display the post title.
Apart from this you can apply CSS styles to your next and previous links. This is up-to you how you want these links and texts to appear. Example given below

1
2
3
4
5
6
7
8
9
10

<div style="text-decoration:none; font-face:verdana; width:640px;">
<div style="float:left;">
<?php previous_post('&#171;&#171; %',
 'Previous: ', 'yes'); ?>
</div>
<div style="float:right;">
<?php next_post('% &#187;&#187; ',
 'Next: ', 'yes'); ?>
</div>
</div>

This will display the Next and Previous Links as given below. ( I have applied some styles to it !)