Next And Previous Links On 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 short tutorial I am going to 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 the functions will echo the links out on the screen and will 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 4 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(); ?>

This is how it will look:

« Previous Post Title

Change Link Format

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

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

This is how it will look:

« Previous Post Title

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'); ?>

This is how it will look:

Link To Previous Post

Link To Posts In 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 exactly the same way as the previous link but will return the next post. This takes exactly the same parameters as the previous post link function and will work the exact 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 of:

Next Post Title »

Change Link Format

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

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

Next Post Title »

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'); ?>

This is how it will look:

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 link 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.

Author: (1 Posts)

Paulund is a website dedicated to writing tutorials and code snippets about Web Development, the main subjects are PHP, Wordpress, jQuery, CSS3 and HTML5. Website: paulund.co.uk.

Comments