How to Create Next & Previous Links in WordPress Posts

On many WordPress themes you see links at the bottom of single posts which direct you to the previous and next posts of the blog.

So, in this tutorial, I will show you how to use the built-in WordPress functions to create those links.

There is a function for both the previous link and the next link. Both of these functions should be used on a single post within the loop. Both functions will echo the links on the screen and allow you to change the format of the links on the page.

The Previous Post Link

WordPress has the function previous_post_link which should be used in the loop of the single posts. This function will create a link to the previous post by date. If there are no posts, then a link will not be displayed.

To use the previous post link just use the below snippet:

<?php previous_post_link($format, $link, $in_same_cat = false, $excluded_categories = ''); ?>

This function accepts four parameters:

• $format – This will allow you to change the format of the outputted link. To define just the link, use the token %link.
• $link – This defines the text that is used on the link. The default is %title of the post.
• $in_same_cat – This is a boolean which defines if the linked post is in the same category or not. The default is false.
• $excluded_categories – This allows you to define which categories are excluded from being linked to.

Examples of Using Previous Post Link

All of the parameters in the previous_post_link are optional, so the simplest use of this function is to use no parameters:

<?php previous_post_link(); ?>

Change Link Format

To change the format of the link, you can wrap it in an h1 tag by using the first parameter:

<?php previous_post_link('<h1>%link</h1>'); ?>

Change Link Text

To change the text of the link, you need to change the second parameter:

<?php previous_post_link('%link', 'Link To Previous Post'); ?>

Link to Posts in the Same Category

To only link to previous posts in the same category, use the following snippet:

<?php previous_post_link('&laquo; %link', '%title', TRUE); ?>

Exclude Links in Category

To exclude any categories from being linked to from this link, you need to use the 4th parameter. To exclude all posts with a category ID of 17, use the following snippet:

<?php previous_post_link('&laquo; %link', '%title', FALSE, '17'); ?>

Next Post Link

The next_post_link function works the same way as the previous link but will return the next post. This takes the same parameters as the previous post link function and will work the same way.

If there is no next post, then the link will not be displayed.

<?php next_post_link('format', 'link', 'in_same_cat', 'excluded_categories'); ?>

Examples of Using Previous Post Link

All of the parameters in the next_post_link are optional, so the simplest use of this function is to use no parameters.

<?php next_post_link(); ?>

This adds a link on the page to the next post using the default values.

Change Link Format

To change the format of the link, you can wrap it in an h1 tag by using the first parameter:

<?php next_post_link('<h1>%link</h1>'); ?>

Change Link Text

To change the text of the link, you need to change the second parameter:

<?php next_post_link('%link', 'Link To Next Post'); ?>

Link to Posts in Same Category

To only link to the next posts in the same category, use the following snippet:

<?php next_post_link('&laquo; %link', '%title', TRUE); ?>

Exclude Links In Category

To exclude any categories from being linked to from this link, you need to use the 4th parameter. To exclude all posts with a category ID of 17, use the following snippet:

<?php next_post_link('&laquo; %link', '%title', FALSE, '17'); ?>

Use in a Theme

When you use these in your WordPress theme, you would want the previous link to float to the left and the next post link to float to the right.

Here is a real-world example of using these functions.

<?php
    previous_post_link('<span class="left">&laquo; %link</span>');
    next_post_link('<span class="right">%link &raquo;</span>');
?>                           
<div class="clearfix"></div>

This adds a span around both of the links adding a CSS class of left or right, so you can float the link. We then use the clearfix example to clear the floats on the page.