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