Display WordPress post navigation in the theme

This tutorial explains how you can display the WordPress post navigation to display the previous and next post in your theme. In addition to adapting the links, I will also show you how you can restrict the navigation to posts from the same category.

Previous / Next Post Navigation in WordPress

While in earlier WordPress versions individual functions had to be called for the output of the previous and the next post, since WordPress 4.1 a function for the complete display of the navigation is available with the_post_navigation () :

 the_post_navigation();

The function is just a wrapper and calls get_the_post_navigation () , which returns the post navigation as an HTML string. Alternatively, the latter function can therefore be used directly if the post navigation is not to be output immediately.

If no parameters are specified, the following HTML code is output.

 <nav class="navigation post-navigation" role="navigation"> <h2 class="screen-reader-text">Beitrags-Navigation</h2> <div class="nav-links"> <div class="nav-previous"> <a href="%post_permalink" rel="prev">%post_title</a> </div> <div class="nav-next"> <a href="%post_permalink/" rel="next">%post_title</a> </div> </div> </nav>

Instead of % post_permalink and $ post_title , the URL and title of the post are of course used.

Show WordPress post navigation in the theme

The post navigation is best displayed below the post. Calling the function therefore makes sense either in the single.php or content-single.php and should be done within the WordPress loop.

The starter theme Underscores calls the_post_navigation() e.g. in the single.php :

 // Start the WordPress Loop. while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content', 'single' ); // Display Post Navigation. the_post_navigation(); comments_template(); endwhile; // End of the loop.

Now let's see how the feature can be customized.

Adjust link text for previous and next post

The function takes an array with the following arguments:

  • prev_text
  • next_text
  • in_same_term
  • excluded_terms
  • taxonomy
  • screen_reader_text

The link text for the previous and next post can be adjusted with the first two parameters. By default, the title of the post with the % title variable is used as the link text.

For a little more context, we want to display a subtitle with “Previous Post” and “Next Post” in addition to the title of the article. The subtitle should of course be translatable into German using the appropriate localization functions.

 the_post_navigation( array( 'prev_text' => '<span class="nav-subtitle">' . __( 'Previous Post', 'theme-slug' ) . '</span> <span class="nav-title">%title</span>', 'next_text' => '<span class="nav-subtitle">' . __( 'Next Post', 'theme-slug' ) . '</span> <span class="nav-title">%title</span>', ) );

To distinguish between subtitles and titles, we enclose both with <span> elements with the classes nav-subtitle and nav-title .

Style WordPress post navigation with CSS

In the style.css we can now add some CSS code to design the links to the previous and next post. A two-column layout with Flexbox is ideal here if the links are to be displayed next to each other:

 .post-navigation .nav-links { display: flex; } .post-navigation .nav-links .nav-previous, .post-navigation .nav-links .nav-next { width: 50%; } .post-navigation .nav-links .nav-next { text-align: right; } .post-navigation .nav-links .nav-subtitle { display: block; font-size: 14px; font-weight: bold; text-transform: uppercase; color: #888; } .post-navigation .nav-links .nav-previous .nav-subtitle:before { content: "\00AB"; /* Left Arrow */ } .post-navigation .nav-links .nav-next .nav-subtitle:after { content: "\00BB"; /* Right Arrow */ }

The subtitle can be highlighted in color and typographically from the title of the article and provided with arrows.

This gives us the following result:

The styling is only an example, so it can be further refined as you wish.

Limit WordPress post navigation to a certain category only

Normally, all posts are always included in the post navigation, ie exactly the previous and next post - sorted by date - is displayed.

Post navigation is a useful feature to encourage website visitors to read another article. It often makes more sense to show the previous and next post in the same category, as these are likely to be more thematically related to the article being viewed.

In order to use the in_same_term only within a category, the parameter in_same_term can be in_same_term with the value true . Navigation within a category works best when only one category is assigned to each post.

 the_post_navigation( array( 'prev_text' => '<span class ="nav-subtitle">' . __( 'Previous Post', 'theme-slug' ) . '</span> <span class ="nav-title">%title</span>', 'next_text' => '<span class ="nav-subtitle">' . __( 'Next Post', 'theme-slug' ) . '</span> <span class ="nav-title">%title</span>', 'in_same_term' => true, 'taxonomy' => 'category', ) );

taxonomy can also be used to taxonomy other taxonomies such as keywords or custom taxonomies instead of categories.