To add previous/ next post navigation at the end of a WordPress post I use the following php code.
It adds the title, thumbnail and link to the posts before and after, the current article. Like related article feeds, this sort of content recirculation helps a reader to stay on your site, rather than reaching a dead end of a post.
get_previous_post() and get_next_post()
In the code we set variables for get_previous_post() and get_next_post(), before calling in the code block only if there are other posts. This way no html or any border or padding added to the footer block, will show on the site if both prev or next posts are empty.
We then get the thumbnail, link, title of the previous post. The thumbnail element has been commented out below, but will display once uncommented and ‘post-thumb’ is replaced by a thumbnail type defined in your theme.
My code also includes Bootsrap and Font Awesome markup, that can be removed if not used on your site.
<?php
$prev_post = get_previous_post();
$next_post = get_next_post();
?>
<?php if (!empty( $prev_post ) || ( $next_post )) {?>
<footer class="nav-single prevnext">
<nav class="row">
<div class="post col-xs-6 nav-prev">
<div class="post-item">
<?php if (!empty( $prev_post )) {?>
<?php /*?><a href="<?php echo get_permalink( $prev_post->ID ); ?>" class="post-mask">
<div class="post-link">
<i class="fa fa-plus"></i>
</div>
<div class="lol-images">
<?php
$prevthumbnail = get_the_post_thumbnail($prev_post->ID, 'post-thumb', array('class' => 'img-responsive'));
echo $prevthumbnail;
?>
</div>
</a><?php */?>
<div class="entry-meta"><span>Previous Post</span></div>
<h2 class="entry-title"><a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php echo $prev_post->post_title; ?></a></h2>
<?php } ?>
</div>
</div>
<div class="post col-xs-6 nav-prev">
<div class="post-item">
<?php if (!empty( $next_post )) {?>
<?php /*?><a href="<?php echo get_permalink( $next_post->ID ); ?>" class="post-mask">
<div class="post-link">
<i class="fa fa-plus"></i>
</div>
<div class="lol-images">
<?php
$nextthumbnail = get_the_post_thumbnail($next_post->ID, 'post-thumb', array('class' => 'img-responsive'));
echo $nextthumbnail;
?>
</div>
</a><?php */?>
<div class="entry-meta"><span>Next Post</span></div>
<h2 class="entry-title"><a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a></h2>
<?php } ?>
</div>
</div>
</nav>
</footer>
<?php } ?>
I hope this comes in handy, if you’re doing any WordPress theme development. I put this in its own include file and called it in from my content-single.php file, which only displays on posts.
<?php get_template_part('templates/content', 'single-related'); ?>
