How to add Next and Previous Links in WordPress single.php Page

In this blog we will show you how to add forward and previous links in the WordPress single.php page

To make your website more attractive we add next and review buttons under the single page of the blog post which makes the website more user-friendly.

Here are two ways to design: as below and add the following and back buttons with and without images.

How to add forward and previous links with an image on a WordPress single.php page

Open functions.php and paste the code

 
// single.php next prev function code
function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
    if ( $next_post || $prev_post ) : ?>
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
    <?php endif;
}

Add CSS code for a better-looking design

.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;
}

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

.wpb-posts-nav a svg {
display: inline-block;
margin: 0;
vertical-align: middle;
}

.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;
}

Add This Code

<?php wpb_posts_nav(); ?>

Output:-

How to Add Back and Forward Links in WordPress

To add back and forward links to WordPress you run this function in your functions.php

Open functions.php and paste the code

// single.php next prev function code
function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
      
    if ( $next_post || $prev_post ) : ?>
      
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div> 
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
      
    <?php endif;
}

Add CSS code for a better-looking design

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

.wpb-posts-nav a {
display: grid;
grid-gap: 20px; 
}

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

.wpb-posts-nav a svg {
display: inline-block;
margin: 0;
vertical-align: middle;
}

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

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