WordPress forward and back navigation I find pleasing

A new addition to this site is forward-back navigation at the bottom of posts. I’m not sure why I went 15 years or so without thinking about a reader who might want to browse the scintillating and inspiring topics I cover on a semi-regular basis in details and with such stunning insight but it just never occurred to me until I was messing around with creating topically relevant featured images using Stable Diffusion, but in time the thought came and I’m happy with the result.

This guide from wpbeginner was my starting point. I used their wpb_posts_nav function as a basis, but removed the SVG arrows and navigation aid text to simplify presentation. It ends up looking like this, which I simply added to functions.php of my custom child theme using the theme editor just before the final ; and last line ?>. This version is 100% derivative of the wpbbinner code with some minor deletions to my taste and reversing left/right of previous next as I tend to think of time as flowing left-to-right.

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__next">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <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>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
      
    <?php endif;
}

There’s a bit of css that adds some styling. I made a few small changes to my preferences and removed the bits no longer needed and appended this to the very end of the style.css that comes with my template.

/* Post Navigation Code */
.wpb-posts-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 25px auto;
}
  
.wpb-posts-nav a {
    display: grid;
    grid-gap: 20px;
    align-items: center;
}
  
.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: 0px;
}

The last step is to add the nav function call to your single.php page. In my page, it works well just after the endwhile, the code is just <?php wpb_posts_nav(); ?> and for my theme is placed thus:

...
<?php endwhile; // end of the loop. ?>
<?php wpb_posts_nav(); ?>
  </div>
...

I’m happy with the results.

https://www.wpbeginner.com/wp-tutorials/how-to-add-next-previous-links-in-wordpress-ultimate-guide/