DEV Community

Cover image for Next/Previous Post Navigation in WordPress
SnippFlow
SnippFlow

Posted on

Next/Previous Post Navigation in WordPress

Navigation between posts with “Next/previous” links is a feature many blogs and sites have, making it easy for users to browse post content in an orderly fashion. With “previous” and “next” links users can jump to earlier or later posts without having to go back to the main page or content list. This improves user experience and increases engagement by allowing users to find more content without having to leave the site. Well designed navigation like this includes the titles of adjacent posts which encourages users to keep browsing and can lead to longer time on site.

/* ---------------------------------------------------------- */
//                Snippflow post navigation                   //
/* ---------------------------------------------------------- */
function sp_post_nav_shortcode( $atts ) {

  $atts = shortcode_atts( array(
      'type' => 'next',
  ), $atts, 'sp_post_nav' );

  // Next / Prev post
  $post = $atts['type'] === 'prev' ? get_previous_post() : get_next_post();

  // Next / Prev icon class
  $arrow_class = $atts['type'] === 'prev' ? 'fas fa-arrow-left' : 'fas fa-arrow-right';

    // Container class
    $link_class = $atts['type'] === 'prev' ? 'prev' : 'next';

  if ( $post ) {

      $post_title = get_the_title( $post );

      $sp_post_nav = '<a href="' . esc_url( get_permalink( $post ) ) . '" class="post-link ' . $link_class . '">';
      $sp_post_nav .= '<i class="' . $arrow_class . '"></i>';
      $sp_post_nav .= '<div class="inner-wrapper">';
      $sp_post_nav .= $atts['type'] === 'prev' ? '<p>Previous article:</p>' : '<p>Next article:</p>';
      $sp_post_nav .= '<h6>' . $post_title . '</h6>';
      $sp_post_nav .= '</div>';
      $sp_post_nav .= '</a>';

      return $sp_post_nav;
  }

  return '';
}
add_shortcode( 'sp_post_nav', 'sp_post_nav_shortcode' );
Enter fullscreen mode Exit fullscreen mode

Read full article: Next/Previous Post Navigation in WordPress
WordPress Snippets

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay