Next and Previous Posts Navigation With Thumbnails.

A nice way of adding next and previous post navigation with thumbnails and a short excerpt. I’ve created a file that you can just add into your theme folder and call in your actual theme with this include snip;

<?php include_once('_wptricks-sp-navigation.php'); ?>

If you want to download my file then click here, otherwise you can copy and paste the code below into your single.php template file.

I’m adding an excerpt using a custom excerpt length, which I expand on in this post – Custom excerpt length & Read More link WordPress. If you don’t need a specif length excerpt then you could just use the build it excerpt.

<?php the_excerpt(); ?>

the_post_thumbnail

You can alter the size of the thumbnail in the WordPress settings/media menu from the dashboard or you could add a custom thumbnail size in your functions.php with this snippet; change the 84 x 84 to the size you require.

/* FEATURED IMAGE */
 add_theme_support( 'post-thumbnails' );
 set_post_thumbnail_size( 84, 84, true);

Snippet

Add this below the post section of your sinlge.php.

<?php
	$prevPost = get_previous_post(true);
	$nextPost = get_next_post(true);
?>

    <?php $prevPost = get_previous_post(true);
        if($prevPost) {
            $args = array(
                'posts_per_page' => 1,
                'include' => $prevPost->ID
            );
            $prevPost = get_posts($args);
            foreach ($prevPost as $post) {
                setup_postdata($post);
    ?>
        <div class="post-previous">
        <!-- ADD THE THUMBNIAL AND LINK IT TO THE POST -->
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
        <!-- ALSO WITH THE TITLE -->
            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
        <!-- SHOW THE CUTOM EXCERPT LENGTH -->
            <p><?php $content = get_the_content(); echo wp_trim_words( $content , '28' ); ?></p>
        <!-- FINALLY SHOW AN ACTUAL NAVIGATIONAL PROMPT -->            
             <a class="previous" href="<?php the_permalink(); ?>"><i class="fa fa-arrow-left"></i> Previous Article</a>
        </div>
    <?php
                wp_reset_postdata();
            } //end foreach
        } // end if
         
        $nextPost = get_next_post(true);
        if($nextPost) {
            $args = array(
                'posts_per_page' => 1,
                'include' => $nextPost->ID
            );
            $nextPost = get_posts($args);
            foreach ($nextPost as $post) {
                setup_postdata($post);
    ?>
        <div class="post-next">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
            <p><?php $content = get_the_content(); echo wp_trim_words( $content , '28' ); ?></p>
            
            <a class="previous" href="<?php the_permalink(); ?>">Next Article <i class="fa fa-arrow-right"></i></a>
        </div>
    <?php
                wp_reset_postdata();
            } //end foreach
        } // end if
    ?>

Style.css

Then give it some style, I’ve included below the CSS that I’m using on this site. you can see an example below this post.

.single-post-nav {
	width: 100%;
	margin-top: 60px;
	border-top: 3px solid #45A3D6;
	background: #fff;
}

.single-post-nav a {
	text-decoration: none;
}

.single-post-nav > div {
	width: 50%;
	float: left;
	padding: 30px 50px;
	text-align: right;
}

.single-post-nav > div:first-child {
	border-right: 3px solid #45A3D6;
	text-align: left;
}

.single-post-nav > div h4 {
	margin: 0;
}

.single-post-nav > div:nth-of-type(1) img {
	float: left;
	margin-right: 16px;
}

.single-post-nav > div:nth-of-type(2) img {
	float: right;
	margin-left: 16px;
}

For a infinate loop of next and previous posts you could use this in place of the above navigation.

/**
 *  Infinite next and previous post looping in WordPress
 */
if( get_adjacent_post(false, '', true) ) { 
	previous_post_link('%link', '← Previous Post');
} else { 
    $first = new WP_Query('posts_per_page=1&order=DESC'); $first->the_post();
    	echo '<a href="' . get_permalink() . '">&larr; Previous Post</a>';
  	wp_reset_query();
}; 
    
if( get_adjacent_post(false, '', false) ) { 
	next_post_link('%link', 'Next Post &rarr;');
} else { 
	$last = new WP_Query('posts_per_page=1&order=ASC'); $last->the_post();
    	echo '<a href="' . get_permalink() . '">Next Post &rarr;</a>';
    wp_reset_query();
};