Mastering Next/Previous Links in WordPress: The Ultimate Step-by-Step Guide

Have you ever read a blog post and wished for a simple way to navigate to the next one?

That’s where next and previous links become essential. These straightforward navigation tools keep readers engaged by directing them to additional content on your site without any hassle.

WordPress automatically includes next and previous post links, but depending on your theme, they may not be visible or styled to your liking.

But don’t worry! We’ve got you covered. After exploring various methods, we’ve identified several effective ways to add and customize these links.

In this guide, we will demonstrate how to easily implement next and previous links in WordPress, whether you prefer using a plugin or some custom coding.

What Are Next and Previous Links in WordPress?

Next and previous links are dynamic navigation features integrated into WordPress themes. They allow users to seamlessly navigate between posts, enhancing their content discovery experience without unnecessary clicks.

By default, WordPress displays blog posts in reverse chronological order, meaning newer posts appear first.

This indicates that the next post is the one published after the current post being viewed, while the previous post is the one published before it.

Next and previous links enable users to effortlessly navigate through individual articles and blog archives, enhancing your blog’s pageviews.

Many WordPress themes include built-in next and previous post links that automatically appear at the bottom of each post. However, some themes may not show these links, or you might want to customize their placement and appearance on your WordPress site.

Now, let’s explore how to easily add next and previous links in WordPress. You can use the links below to jump to your preferred section:

• Adding Next and Previous Links to WordPress Using a Plugin (Simplest Method)
• Adding Next and Previous Links Using Custom Code
• Styling Next and Previous Links in WordPress
• Adding Next and Previous Links for Posts with Thumbnails
• Adding Next and Previous Links to WordPress Pages
• Bonus: How to Remove Next and Previous Links in WordPress

Adding Next and Previous Links to WordPress Using a Plugin (Simplest Method)

This method is straightforward and recommended for beginners who may not feel comfortable adding code to their websites.

First, install and activate the CBX Next Previous Article plugin. For detailed instructions, refer to our step-by-step guide on how to install a WordPress plugin.

After activating the plugin, navigate to the Settings » CBX Next Previous page. Here, you can select the locations where you want the next and previous links to appear on your site.

This plugin enables you to display Next and Previous navigation arrows on single posts, pages, archive pages, and more.

To configure this, scroll down to the ‘Archive Display Settings’ section and select ‘Yes’ for the areas where you wish to show these links.

To enhance the relevance of your next and previous links, you can opt to display posts from the same category or tag.

Next, scroll down to the ‘Single Article Display Settings’ section. You will find that Posts and Pages are already selected by default for displaying the arrows.

If you prefer to show only one arrow for either the previous or next post, simply choose the ‘Previous’ or ‘Next’ option in the ‘Show Post’ setting.

If you want to display both arrows, select the ‘Yes’ option in the ‘Show Both arrow’ setting.

The free version of the plugin allows you to display arrows for the next and previous articles only. To access additional display options, such as slide-in popups, consider upgrading to the pro version.

Next, choose an arrow style from the dropdown menu located in the ‘Arrow Style Settings’ section.

After making your selection, a preview of the arrows will appear below. Click the ‘Save Settings’ button to apply your changes.

If you want to show next and previous posts from the same taxonomy, switch to the ‘Navigate by Taxonomy’ tab.

Select the taxonomy you wish to use for the next and previous links, then click the ‘Save Settings’ button.

Additionally, the plugin offers the option to track clicks with Google Analytics. To enable this feature, first install Google Analytics on your WordPress site.

Next, navigate to the Google Analytics tab in the plugin settings and turn on the click tracking options.

You can keep the remaining settings as they are or customize them to your preferences. Once you’re done, click the ‘Save Settings’ button to save your changes.

Now, visit your WordPress site to see the next and previous links in action.

This method is simpler, but it offers limited flexibility. For example, the free version of the plugin does not display the titles of the next or previous posts.

Implementing Next and Previous Links with Custom Code

If you’re seeking a more adaptable and customizable approach to adding navigation links, this method is perfect for you. To implement the next and previous links, you’ll need to modify your WordPress theme files.

This can be quite risky, as even the smallest mistake can render your site inaccessible.

This is where WPCode comes into play. It is the top WordPress code snippets plugin because it allows you to safely incorporate custom code without the danger of damaging your website.

For further information, check out our review of WPCode.

First, you must install and activate the WPCode plugin. For instructions, refer to our tutorial on how to install a WordPress plugin.

After activation, navigate to theCode Snippets » +Add Snippetpage in the WordPress dashboard. Here, click the ‘+ Add Custom Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ section.

This will take you to the ‘Create Custom Snippet’ page, where you can begin by entering a title for your code.

Next, select ‘PHP Snippet’ as the code type from the dropdown menu on the right.

Next, insert the following custom code into the ‘Code Preview’ box:

<?php the_post_navigation(); ?>

After that, scroll down to the ‘Insertion’ section and select the ‘Auto Insert’ mode.

Your code will automatically run on your site once activated.

Next, open the ‘Location’ dropdown menu and switch to the ‘Page-Specific’ tab.

Then, select ‘Insert After Post’ as the location for your code. Your next and previous post links will now appear at the end of each post.

If you have a different position in mind, you can choose that option instead.

Finally, scroll back to the top and switch the ‘Inactive’ toggle to ‘Active.’

Then, click the ‘Save Snippet’ button to save your changes.

You can now visit your WordPress site to see the Next and Previous links in action.

Here, you will see that the custom code you added displays links to the next and previous posts, with the post title as the clickable text.

It does not indicate that these are links to the next and previous articles.

If you want to modify that, you can add the following custom code to the ‘Code Preview’ box instead:

<?php
the_post_navigation(
    array(
        'prev_text' => __( 'Previous Article: %title' ),
        'next_text' => __( 'Next Article: %title' ),
    )
);
?>

After saving your changes in WPCode, just visit your website to see them live.

Here’s how it appeared on our test site:

You can enhance your navigation by using special characters and arrows alongside the titles of the next and previous posts.

To implement this, replace the code with the following:

<?php
the_post_navigation(
    array(
        'prev_text' => __( '← %title' ),
        'next_text' => __( '%title →' ),
    )
);
?>

Here’s how this code appeared on our test website:

Now, if you want to make the next and previous links more relevant to the current article being viewed, you can do that.

You can achieve this by displaying the next and previous links from the same category or tags:

<?php
the_post_navigation(
    array(
        'prev_text'   => __( '← %title' ),
        'next_text'   => __( '%title →' ),
        'in_same_term' => true,
        'taxonomy'     => __( 'category' ),
    )
);
?>

This code instructs WordPress to show the next and previous posts within the same category. You can modify the taxonomy parameter to use tags or any other custom taxonomy as needed.

Styling Next and Previous Links in WordPress

Now that we have learned how to add Next and Previous links in WordPress, let’s explore how to style them effectively.

By default, WordPress automatically assigns several standard CSS classes to the post navigation links. You can utilize these CSS classes in WPCode to customize the appearance of these links.

First, navigate to the Code Snippets » Add Snippet section from the WordPress admin sidebar. Then, click the ‘+ Add Custom Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

Once you are on the ‘Create Custom Snippet’ page, provide a title for your code.

Next, select ‘CSS Snippet’ as the code type from the dropdown menu.

After that, you can insert the following CSS code into your ‘Code Preview’ box.

This basic CSS simply positions the next and previous links next to each other, but on opposite sides of the same line:

.post-navigation {
    margin: 40px 0;
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    width: 48%;
}

Enhance the visibility of your navigation links by incorporating background colors, hover effects, and additional styles.

Here is a sample CSS code to help you get started:

nav.navigation.post-navigation {
    background: #f6f7f7;
    padding: 20px;
    border-radius: 8px;
}

nav.navigation.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

nav.navigation.post-navigation .nav-previous,
nav.navigation.post-navigation .nav-next {
    width: 48%;
}

nav.navigation.post-navigation a {
    display: block;
    padding: 15px 20px;
    font-weight: 700;
    text-decoration: none;
    color: #333;
    background: #ffffff;
    border-radius: 6px;
    transition: all 0.3s ease;
}

nav.navigation.post-navigation a:hover {
    background: #0073aa;
    color: #ffffff;
}

Next, scroll down to the ‘Insertion’ section and select the ‘Auto Insert’ mode.

Your custom code will run automatically once activated.

Toggle the ‘Inactive’ switch to ‘Active’ to enable it.

Then, click the ‘Save Snippet’ button to save your changes.

Visit your WordPress site to view the newly styled links for your posts.

The link text now features a background color and a hover effect, enhancing the visibility of the next and previous links.

How to Add Next and Previous Links for Posts with Thumbnails

To make your next and previous links stand out, consider displaying post thumbnails alongside them. Images are an effective way to capture user attention and enhance engagement with these links.

You can add custom code to your functions.php file for this, but be cautious, as even a minor mistake can disrupt your website. We recommend using WPCode for a safer approach.

After activating the plugin, navigate to the Code Snippets » +Add Snippet page and click the ‘+ Add Custom Snippet’ button found under the ‘Add Your Custom Code (New Snippet)’ section.

When you reach the ‘Create Custom Snippet’ page, you will need to enter a title for your code.

Next, select ‘PHP Snippet’ from the code type dropdown menu on the right.

Then, paste the following custom code into the ‘Code Preview’ box:

function wpb_posts_nav() {
    $next_post = get_next_post();
    $prev_post = get_previous_post();

    if ( $next_post || $prev_post ) :
        ?>
        <div class="wpb-posts-nav">

            <?php if ( $prev_post ) : ?>
                <div class="wpb-posts-nav__prev">
                    <a href="<?php echo esc_url( get_permalink( $prev_post ) ); ?>" rel="prev">
                        <div class="wpb-posts-nav__thumbnail wpb-posts-nav__thumbnail--prev">
                            <?php echo get_the_post_thumbnail( $prev_post, array( 100, 100 ) ); ?>
                        </div>
                        <div class="wpb-posts-nav__content">
                            <strong><?php _e( 'Previous Post', 'textdomain' ); ?></strong>
                            <h4><?php echo esc_html( get_the_title( $prev_post ) ); ?></h4>
                        </div>
                    </a>
                </div>
            <?php endif; ?>

            <?php if ( $next_post ) : ?>
                <div class="wpb-posts-nav__next">
                    <a href="<?php echo esc_url( get_permalink( $next_post ) ); ?>" rel="next">
                        <div class="wpb-posts-nav__content">
                            <strong><?php _e( 'Next Post', 'textdomain' ); ?></strong>
                            <h4><?php echo esc_html( get_the_title( $next_post ) ); ?></h4>
                        </div>
                        <div class="wpb-posts-nav__thumbnail wpb-posts-nav__thumbnail--next">
                            <?php echo get_the_post_thumbnail( $next_post, array( 100, 100 ) ); ?>
                        </div>
                    </a>
                </div>
            <?php endif; ?>

        </div><!-- .wpb-posts-nav -->
        <?php
    endif;
}

This code creates a function that displays the next and previous posts along with their featured images or thumbnails.

After entering the snippet, activate it by toggling the switch to ‘Active’ and then click the ‘Save Snippet’ button.

Next, return to the Code Snippets » + Add Snippet page and click the ‘Use Snippet’ button under the ‘Add Your Custom Code’ section.

When the ‘Create Custom Snippet’ page opens, copy the following code and paste it into the ‘Code Preview’ box:

<?php wpb_posts_nav(); ?>

This code specifies where you want the links to appear.

Ensure you select ‘PHP Snippet’ from the ‘Code Type’ dropdown menu.

Next, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode for automatic execution of the code.

You can also expand the ‘Location’ section and switch to the ‘Page-Specific’ tab. From there, select the ‘Insert After Post’ option to ensure the thumbnails display correctly next to the links.

Finally, activate the switch to ‘Active’ and click the ‘Save Snippet’ button.

Visit your website now to see the next and previous links in action.

You might notice that these links appear somewhat unrefined.

You can enhance their appearance by adding custom CSS through WPCode.

.wpb-posts-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 100px auto;
}

.wpb-posts-nav a {
    display: grid;
    grid-gap: 20px;
    align-items: center;
    text-decoration: none;
}

.wpb-posts-nav h4,
.wpb-posts-nav strong {
    margin: 0;
}

.wpb-posts-nav > div:nth-child(1) a {
    grid-template-columns: 100px 1fr;
    text-align: left;
}

.wpb-posts-nav > div:nth-child(2) a {
    grid-template-columns: 1fr 100px;
    text-align: right;
}

.wpb-posts-nav__thumbnail {
    display: block;
    margin: 0;
}

.wpb-posts-nav__thumbnail img {
    border-radius: 10px;
}

Save your changes and visit your website to see the next and previous links with thumbnails displayed.

Here’s how it appeared on our test site:

For further information, check out our guide on adding thumbnails to next and previous post links in WordPress.

How to Add Next and Previous Links to WordPress Pages

Typically, post navigation links are designed for blog posts in WordPress, as these are displayed in reverse chronological order.

In contrast, WordPress pages are not usually published in chronological order. For further information, refer to our guide explaining the differences between posts and pages in WordPress.

Nevertheless, some users may wish to include page navigation to assist visitors in easily locating the next page. Fortunately, the code we previously used with WPCode can display the previous and next links for pages.

If you want to show these links on both pages and posts, no additional changes are necessary.

However, if you prefer to display the previous and next links only for pages, navigate to the Code Snippets » + Add Snippet page.

Here, select the ‘Add Your Custom Code (New Snippet)’ option.

On the ‘Create Custom Snippet’ page, provide a title for your snippet.

Then, select ‘PHP Snippet’ as the code type from the dropdown menu.

Next, insert the following custom code into the ‘Code Preview’ box.

This is the same code you can use to add previous and next links for posts:

<?php the_post_navigation(); ?>

Next, navigate to the ‘Insertion’ section and select the ‘Auto Insert’ mode to enable automatic code execution.

You can also adjust the position of your links using the ‘Location’ dropdown menu. For instance, selecting ‘Insert After Post’ will place your links at the bottom of each page.

If you have a different position in mind, simply choose the relevant option from the dropdown.

Then, scroll down to the ‘Smart Conditional Logic’ section and activate the ‘Enable Logic’ toggle.

After that, select ‘Show’ from the ‘Conditions’ dropdown menu and click the ‘+ Add new group’ button.

This will reveal new settings where you need to specify the conditions for when the code snippet should be displayed.

Since we want to show the previous/next links only on pages, open the first dropdown menu and switch to the ‘Where (page)’ tab in the left column.

First, choose ‘Post Type’ from the available options, select ‘Is’ from the middle dropdown menu, and then pick ‘Pages’ from the final dropdown.

Next, scroll back to the top, switch the ‘Inactive’ toggle to ‘Active’, and click the ‘Save Snippet’ button. You have now successfully integrated the previous and next links into your pages.

Here’s how it appeared on our demonstration site:

Bonus: How to Remove Next and Previous Links in WordPress

Some users may prefer to eliminate the next and previous links in WordPress.

For example, some users might find these links less useful and may want to showcase related posts or popular content instead.

There are two methods to remove the next and previous links in WordPress.

Method 1: Remove the Code from Your WordPress Theme

To eliminate the next and previous links in WordPress, you will need to delete the code that displays these links in your theme.

The downside of this method is that if you update your theme, the deleted code may reappear if it was part of the original theme.

To prevent this, you should create a child theme.

Then, locate the code that controls the display of the next and previous links in your parent theme.

Typically, this can be found within the single.php file or content-single.php templates.

Essentially, you should search for the code that contains the following function:

<?php the_post_navigation(); ?>

This code might have a slightly different structure and parameters.

For example, on our test site, the theme utilized this code to showcase the links:

the_post_navigation(
    array(
        'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span><span class="nav-title">%title</span>',
        'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span><span class="nav-title">%title</span>',
    )
);

If you are using a child theme, you will need to replicate this specific template in your child theme and remove the lines that display the next or previous links.

Alternatively, you can also remove it directly from your parent theme.

Removing the code will prevent WordPress from showing the next and previous links.

Method 2: Concealing the Next and Previous Posts Links

This approach doesn’t eliminate the next and previous links; it simply hides them from view for users.

To implement this, add the following custom CSS to your WordPress theme:

nav.navigation.post-navigation {
    display: none;
}

Be sure to save your changes.

After that, check your website to confirm that the navigation links are no longer visible.

We hope this guide has helped you understand how to easily add next and previous links in WordPress. You might also find our tutorial on using WordPress block patterns and our essential tips for utilizing shortcodes in WordPress helpful.

If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.