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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay