WordPress previous and next post navigation with images and inactive links

As with most aspects of WordPress, the next / previous navigation links are highly customisable, but one thing that might not be immediately obvious is how to use images for the links or how to show inactive links.

Navigation

It’s actually very simple when you know how and can also be used for the newer/older posts links on archive pages. In this tutorial we’ll show you how to use the WordPress previous and next post navigation with images.

Basic post navigation links

The basic codes to generate post navigation are:

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

Float these to the left and right of the page and bingo, instant navigation. There are a number of parameters that can be used too:

format – This controls what appears before and after the link. '%link' is replaced with the link text as specified below.
link – This is where you define the link text. The title can be inserted with '%title'.
in_same_cat – If set as TRUE, generated links will only navigate through posts of the same category. Things can get a little confusing if a post is in multiple categories.
excluded_categories – Posts in the categories defined here will not show when navigating through the posts.

An example using all the parameters would be:

<?php next_post_link('<strong>%link</strong>', 'Next: %title', TRUE, '5'); ?>

See the WordPress Codex to find out more about using find out more about using these parameters:

Template Tags/next post link
Template Tags/previous post link

Using images for the links

So we have the basics down, how do get the function to display an image for the link?

<?php next_post_link('%link','<img src="IMAGELINK"/>'); ?>

Easy when you know how! You can reference the image as an absolute link (eg. www.yoursite.com/wp-content/themes/yourtheme/images/image.jpg) but this is a little unwieldy and will break if you move your WordPress installation. A much better way is to reference the template directory using the following function:

<?php bloginfo('template_directory'); ?>

You can’t just paste that into the image tag though, we need to format it to appear within the existing php function like so:

<?php next_post_link('%link','<img src="' . get_bloginfo("template_directory") . '/images/image.jpg" />'); ?>

Show inactive links in post navigation

The only problem with this method is that when you get to the first/last post, then one of the arrows will disappear and might mess up your beautiful design. You might want to show a greyed out arrow when there is no link.  To do this we can use some conditional php:

<?php
// If there are older posts...
    if ( get_next_post() ) {
// then display the link...
        echo 'next_post_link('%link','<img src="' . get_bloginfo("template_directory") . '/images/next-arrow.jpg" />');
    } else {
// otherwise, display the greyed out arrow
        echo '<img src="' . get_bloginfo("template_directory") .  '/images/next-arrow-grey.jpg" />';
    };
?>

All these examples are for next post link for single pages, for the previous post obviously just replace nest with previous. For navigation between pages in blog archives you should use next_posts_link and previous_posts_link and in the conditional statement, get_next_posts_link and get_previous_posts_link.


10 Comments

justwordpress

great tutorial i was looking for this in ages.. however in wordpress 3.0 you don’t need the if statement… if it has any previous/next article it will show the image if not it will not:
here’s what i’m using and works like a charm

<?php previous_post_link('%link','’); ?>

<?php next_post_link('%link','’); ?>

13 11 2010 10.31AM
justwordpress

hmm it seems the code is not showing up… anyway just use the 6th code line kinocreative posted and remember to create your buttons and save them in the images directory of your theme! many thanks

13 11 2010 10.33AM
Simon

Hi, thanks for the comment. The if statement allows you to display an alternative image when there is no previous page. This means you can still have two arrows on screen and have a greyed out version for the inactive link. This can sometimes look more elegant than simply having one link showing.

13 11 2010 11.21AM
laurent

thank you! worked perfectly, really pleased.

17 01 2011 08.58PM
Glenn

How do I float and left and right using PHP?

Thanks.

22 06 2011 10.01AM
Simon

Hi Glenn. The next/prev post tag includes a format parameter that allows you to customise the output. Try the following:

<?php previous_post_link(‘<span class=”alignleft”>%link</span>’); ?>

This will wrap the link in a span with the .alignleft class. Simply ensure that your class is defined as float: left and all should be well.

22 06 2011 10.19AM
Alan

Your show inactive link code breaks the entire site.

08 07 2012 01.03AM
Alex

Hi Alan,
Thanks for the comment! We’ve fixed the code above so it should now work as expected.
Alex

27 07 2012 04.00PM
Ray Anthony

I had to remove the echo on next_post_link() from the last code for it to work. It worked great then, but the inactive arrow stopped working when I set the parameter to only show posts from the current category. Do you know of a fix for that? As an alternate method I just used CSS to set the background as the inactive arrows. I may just stick with that, but would be good to know for future references.

25 10 2012 01.58PM
Abhay

Thats a great help to display next post link without using any plugin.

07 11 2013 08.08AM

Leave a Comment

Your email address will not be published. Required fields are marked *

Let's start a project