Implementing Custom Post Navigation in WordPress Themes

Posted on 19th June 2023

One of the most important aspects of any WordPress theme is post navigation. Post navigation is how users move from one post to the next, and how they return to previous posts. By default, WordPress provides several ways to navigate through posts:

  • Next and Previous Links – These are the links that appear at the bottom of each post, labeled “Next post” and “Previous post”.
  • Paginated Navigation – This is the navigation that appears at the bottom of the post content area, usually labeled “1 2 3 4 5 6 7 8 9 10”.
  • Category and Tag Archives – These are the pages that list all of the posts in a particular category or tag.

While these methods of post navigation are fine for most sites, there are times when you may want to create a custom post navigation system. For example, you may want to:

  • Create a navigation system that allows users to move through posts in a specific order (such as by date or alphabetically).
  • Display navigation links that are different from the default next/previous links (for example, you may want to show thumbnails of the next and previous post).
  • Add custom navigation to the top or bottom of the post content area.

In this article, we will show you how to create custom post navigation in WordPress themes.

Creating a Custom Post Navigation System

The first thing you need to do is to create a new file in your WordPress theme and name it post-navigation.php.

Next, you need to add the following code to your post-navigation.php file:

labels->name;

// Get the posts singular label
$post_singular_label = $post_type_object->labels->singular_name;

// Get the posts taxonomy
$posts_taxonomy = $post_type_object->taxonomies[0];

// Get the posts taxonomy terms
$posts_terms = get_the_terms( $post_id, $posts_taxonomy );

// Get the posts taxonomy first term
$posts_term = array_shift( $posts_terms );

// Get the posts taxonomy first term slug
$posts_term_slug = $posts_term->slug;

// Get the posts taxonomy first term link
$posts_term_link = get_term_link( $posts_term );

// Set up the previous post link
$previous_post_link = get_previous_post_link(
‘%link’,
‘‘ . _x( ‘←’, ‘Previous post link’, ‘textdomain’ ) . ‘ %title’
);

// Set up the next post link
$next_post_link = get_next_post_link(
‘%link’,
‘%title ‘ . _x( ‘→’, ‘Next post link’, ‘textdomain’ ) . ‘‘
);

// If there is a previous post
if ( $previous_post_link ) {

// Set up the link to the previous post
$previous_post_link = sprintf(
‘

‘,
$previous_post_link
);

}

// If there is a next post
if ( $next_post_link ) {

// Set up the link to the next post
$next_post_link = sprintf(
‘

‘,
$next_post_link
);

}

// If there is only one post
if ( ! $previous_post_link && ! $next_post_link ) {

// Set up the return link
$return_link = sprintf(
‘

  • %3$s

    • ‘,
    esc_url( $posts_term_link ),
    esc_attr__( ‘Return to ‘, ‘textdomain’ ) . $posts_label,
    esc_html__( ‘← Return’, ‘textdomain’ )
    );

    }

    // If there are both a previous and a next post
    if ( $previous_post_link && $next_post_link ) {

    // Set up the separator
    $separator = sprintf(
    ‘

  • %1$s

    • ‘,
    _x( ‘…’, ‘post navigation separator’, ‘textdomain’ )
    );

    }

    // Build the navigation
    $navigation = sprintf(
    ‘

    %1$s

      %2$s%3$s%4$s%5$s

    ‘,
    esc_html__( ‘Post navigation’, ‘textdomain’ ),
    $return_link,
    $previous_post_link,
    $separator,
    $next_post_link
    );

    // Print the navigation
    echo $navigation;

    ?>

    This code does the following:

    • First, it gets the current post ID and post type.
    • Next, it gets the labels for the posts (plural and singular).
    • Then, it gets the taxonomy for the posts.
    • After that, it gets the terms for the posts taxonomy.
    • Next, it sets up the previous and next post links.
    • Finally, it builds the navigation system and prints it to the screen.

    Adding Custom Navigation to the Post Content Area

    If you want to add custom post navigation to the top or bottom of the post content area, you can use the following code:

    labels->name;

    // Get the posts singular label
    $post_singular_label = $post_type_object->labels->singular_name;

    // Get the posts taxonomy
    $posts_taxonomy = $post_type_object->taxonomies[0];

    // Get the posts taxonomy terms
    $posts_terms = get_the_terms( $post_id, $posts_taxonomy );

    // Get the posts taxonomy first term
    $posts_term = array_shift( $posts_terms );

    // Get the posts taxonomy first term slug
    $posts_term_slug = $posts_term->slug;

    // Get the posts taxonomy first term link
    $posts_term_link = get_term_link( $posts_term );

    // Set up the previous post link
    $previous_post_link = get_previous_post_link(
    ‘%link’,
    ‘‘ . _x( ‘←’, ‘Previous post link’, ‘textdomain’ ) . ‘ %title’
    );

    // Set up the next post link
    $next_post_link = get_next_post_link(
    ‘%link’,

    The following code goes in functions.php

    function my_post_navigation() {
    echo ‘

    ‘;
    previous_post_link(‘%link’, ‘← %title’);
    next_post_link(‘%link’, ‘%title →’);
    echo ‘

    ‘;
    }

    The following code goes in single.php, where you want the navigation to appear

    Copyright © 2024 The Gadget Gazette