Languages: English • 日本語 (Add your language)

The Next and Previous post links guides your visitor through your WordPress site. When it comes to creating strong site-wide navigation, some of the most powerful tools for moving your visitor around are these link tags.

There are two sets of tags that move the visitor through your WordPress site: posts_nav_link(), which displays both the Previous and Next links, and the combination pair of previous_post() and next_post(), which each display one of the Previous or Next links. This article will look at how these two tag sets work.

Note: "Previous" and "Next" in this case refer to posts in the order that they are in, not to any particular direction in time. This often confuses many people, as WordPress, by default displays posts starting from the newest and proceeding backwards in time. Using this default ordering, "Next" would be moving backwards in time, because the "Next" page after page 1 would be page 2, and that would move to older posts. If the post ordering is changed (like via a manual usage of query_posts in a template), then the links will point in different directions. This codex article uses both methods without explanation, because it is example code only. So it is important to keep in mind that the function is referring to an order that is independent of chronological time.

The posts_nav_link

The first set of these site navigation links is featured only on the non-single/non-permalink web pages, such as categories, archives, searches, and the index page. It is the template tag posts_nav_link(). This tag creates two links at the bottom of the page within the WordPress Loop to display the next and previous pages in chronological order.

By default, the posts_nav_link looks like this:

It is often found in a paragraph code or a division like this:

<div class="navigation"><p><?php posts_nav_link(); ?></p></div>

The parameters of the tag are as follows:

<?php posts_nav_link('separator','prelabel','nextlabel'); ?>

Each of these parameters can be used to generate a string, any text, HTML or CSS tags. Let's see what we can do to make these post navigation links more interesting.

Keeping things simple, we could just change the look of the tag results using CSS. Let's go further and also change the content within the tag's parameters.

Next, make the text bold and use the font-variant: small-caps to make it look interesting, and then make the separator the infinity symbol and add some words to the labels.

<div class="navigation"><p><?php posts_nav_link('&#8734;','Go 
Forward In Time','Go Back in Time'); ?></p></div>

And it might look like this:

Let's not stop there, let's add more character entities to really get the visitor's attention so they understand that there is more to your site than what they see on this page.

<div class="navigation"><p><?php posts_nav_link('&#8734;','&laquo;&laquo; Go Forward 
In Time','Go Back in Time &raquo;&raquo;'); ?></p></div>

And it might look like this:

We have just uncovered the surface, but you can let your imagination and web page design skills create these any way you like, adding borders, background images, stylized text, and more.

The Next and Previous Posts

The other set of navigational aids for moving through your site control the next post and previous post links typically found at the bottom of your single/permalink post, such as any single post or article you have published on your site. These direct the user to move to the next or previous post in chronological order.

The template tags are previous_post_link() and next_post_link().

The default usage of these tags are:

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

And it looks like this:

The parameters for both of these tags are:

format 

Text used in combination with the '%' to represent the permalink to the post. The default is the permalink.

text 

Text displayed before the permalink. The default is "next post" and "previous post".

title 

This turns "on" and "off" the use of the post title to be used as the link text. By default, is it "yes". If set to "no", then only the text set in the text parameter and format would show.

Let's put these into action.

The following example displays the next and previous post titles with arrows to emphasize the direction the user may choose. You will notice that we have not set the text parameter, so it will be blank.

<?php previous_post_link('&laquo; &laquo; %', '', 'yes'); ?>
| <?php next_post_link('% &raquo; &raquo; ', '', 'yes'); ?>

Wrap these two tags with CSS and you can do even more with these tags:

<div class="navigation">
<div class="alignleft">
<?php previous_post_link('&laquo; &laquo; %',
 'Toward The Past: ', 'yes'); ?>
</div>
<div class="alignright">
<?php next_post_link('% &raquo; &raquo; ',
 'Toward The Future: ', 'yes'); ?>
</div>
</div> <!-- end navigation -->

And it might look like this:

A useful plugin called "Better Adjacent Post Links" allows you to trim the title of the previous and next posts to any length you see fit. This is useful when you have longer titles that break the site's design.

This is just an introduction on how to use these tags and do fun things with them, but you can do so much more by adding borders, background images, interesting fonts and colors - it's up to you! Have fun!

The Next and Previous Pages

The previous_post_link and next_post_link functions don't work on pages. The Next Page and Next Page, Not Next Post plugins work around this problem.

If you would prefer to add the code to your theme's page template instead:

<?php
$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
$pages = array();
foreach ($pagelist as $page) {
   $pages[] += $page->ID;
}

$current = array_search(get_the_ID(), $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
?>

<div class="navigation">
<?php if (!empty($prevID)) { ?>
<div class="alignleft">
<a href="<?php echo get_permalink($prevID); ?>"
  title="<?php echo get_the_title($prevID); ?>">Previous</a>
</div>
<?php }
if (!empty($nextID)) { ?>
<div class="alignright">
<a href="<?php echo get_permalink($nextID); ?>" 
 title="<?php echo get_the_title($nextID); ?>">Next</a>
</div>
<?php } ?>
</div><!-- .navigation -->

Another option for the code above would be to create a function as shown below:

<?php
function getPrevNext(){
	$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
	$pages = array();
	foreach ($pagelist as $page) {
	   $pages[] += $page->ID;
	}

	$current = array_search(get_the_ID(), $pages);
	$prevID = $pages[$current-1];
	$nextID = $pages[$current+1];
	
	echo '<div class="navigation">';
	
	if (!empty($prevID)) {
		echo '<div class="alignleft">';
		echo '<a href="';
		echo get_permalink($prevID);
		echo '"';
		echo 'title="';
		echo get_the_title($prevID); 
		echo'">Previous</a>';
		echo "</div>";
	}
	if (!empty($nextID)) {
		echo '<div class="alignright">';
		echo '<a href="';
		echo get_permalink($nextID);
		echo '"';
		echo 'title="';
		echo get_the_title($nextID); 
		echo'">Next</a>';
		echo "</div>";		
	}
}	
?>

You can add such function in the bottom of your page.php file so you can call the 'Previous / Next' links calling the function like shown below:

Use:

<?php getPrevNext(); ?>

if you are out of a php block. or use:

getPrevNext();

if you are inside of a php block.

Finally find below a 'page.php' file of twentysixteen theme with such modifications for your reference:

<?php
/**
 * The template for displaying pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that
 * other "pages" on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

get_header(); ?>



<div id="primary" class="content-area">



	<main id="main" class="site-main" role="main">

		<?php
		// Start the loop.
		while ( have_posts() ) : the_post();

			// Include the page content template.
			
			//Adding 'Next / Previous' link to the top of page
			getPrevNext(); 
			
			get_template_part( 'template-parts/content', 'page' );
			
			//Adding 'Next / Previous' link to the end of page
			getPrevNext();
			
			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open()