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
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','’); ?>
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
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.
thank you! worked perfectly, really pleased.
How do I float and left and right using PHP?
Thanks.
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.
Your show inactive link code breaks the entire site.
Hi Alan,
Thanks for the comment! We’ve fixed the code above so it should now work as expected.
Alex
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.
Thats a great help to display next post link without using any plugin.