1. Home
  2. /
  3. Web Design & Development
  4. /
  5. Web Design & Development
  6. /
  7. WordPress
  8. /
  9. How to implement Next and Previous article navigation link with title? And, using custom icons.

How to implement Next and Previous article navigation link with title? And, using custom icons.

Next and Previous article navigation link

Introduction

Sometimes, instead of traditional numeric pagination there might be a need to add some sort of links on left-right pointing arrows to navigate through the next and previous articles in a WordPress blog. In such cases we can use the wordpress functions such as next_post_link and previous_post_link.

These functions can be customized by using filters. Here is an example demostrating the use of these functions to not only customize it to navigate between posts but also add an anchor title (having a post title) on the links as well as replacing any default arrows with your own custom left and right arrow.

WordPress function call for Next-Previous link display

The below script could be placed inside the wordpress theme single.php or content template part file at the start or end of the page where you would like to display the next-previous navigation links.

<div class="prevnxtnav">
<?php previous_post_link('%link'); ?>&nbsp;<?php next_post_link('%link'); ?>
</div>

Here, we are passing ‘%link’ through previous_post_link and next_post_link function calls to ensure we replace the WordPress default left and right arrows.

WordPress filters to override the default anchors

Add the following script inside the themes functions.php file at any place. Make sure to close it properly and use it within the php start and close tags.

next_post_link filter

In this function override, we are replacing the anchor text with the next post title and adding the post title to the anchor’s title for the next_post_link. Example:

add_filter('next_post_link', function($nxt_post_link) {
  $next_post = get_next_post();
  $post_title = trim($next_post->post_title); 
  $nxt_post_link = str_ireplace($post_title, '<img src="/wp-content/themes/yourthemefilename/images/next.svg" alt="Next Article" />', $nxt_post_link);
  $nxt_post_link = str_ireplace('href=', 'title="'.$post_title.'" href=', $nxt_post_link);  
  return $nxt_post_link;
});

previous_post_link filter

In this filter call override, we are replacing the anchor text with the previous post title and to the anchor’s title for the previous_post_link. Example:

add_filter('previous_post_link', function($prev_post_ink) {
  $previous_post = get_previous_post();
  $post_title = trim($previous_post->post_title);  
  $prev_post_ink = str_ireplace($post_title, '<img src="/wp-content/themes/yourthemefilename/images/previous.svg" alt="Previous Article" />', $prev_post_ink);
  $prev_post_ink = str_ireplace('href=', 'title="'.$post_title.'" href=', $prev_post_ink);
  return $prev_post_ink;
});

Now, clubing all scripts, you will be able to display left-right icon based navigations with anchor post titles.

Reviews & Ratings Get your stoe online with Shopify in 60 minutes Shop Now