WordPress: Next/previous post navigation with images and inactive links

Navigation

As with most aspects of WordPress, the next / previous navigation links are highly customisable. The WordPress codex has a pretty comprehensive reference for this, but one thing that might not be immediately obvious is how to use images for the links or how to show inactive links. It’s actually very simple when you know how and can also be used for the newer/older posts links on archive pages.

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 Responses to “WordPress: Next/previous post navigation with images and inactive links”

  1. 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','’); ?>

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

    • Simon says:

      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.

  3. laurent says:

    thank you! worked perfectly, really pleased.

  4. Glenn says:

    How do I float and left and right using PHP?

    Thanks.

    • Simon says:

      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.

  5. Alan says:

    Your show inactive link code breaks the entire site.

  6. Ray Anthony says:

    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.

  7. Abhay says:

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

Leave a Reply