Next and Previous Posts Navigation With Thumbnails.

Posted on 31st May, 2014 8 Comments

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'); ?>

single post nav

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', '&larr; 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();
}; 

Comments

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]

Danc

20th, Oct, 14

Hi,

Thank you for the great tutorial.
I did exactly the way you guided on my custom post type single page.
However, I could call out the thumbnail, neither the link, nor any error shown.
Do you think you can give me some clue?
Thank you.

Below is the code I have in my single post

1,
‘include’ => $prevPost->ID
);
$prevPost = get_posts($args);
foreach ($prevPost as $post) {
setup_postdata($post);
?>

<a href="” class=”director-Name”>

1,
‘include’ => $nextPost->ID
);
$nextPost = get_posts($args);
foreach ($nextPost as $post){
setup_postdata($post);
?>

<a href="” class=”director-Name”>

Aaron

24th, Oct, 14

Hey Danc,
You could always download the file, add the file to your theme then add it to your single.php with an include call.

Add this below the loop.

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

Wayan Adika

29th, Oct, 14

after i try this tutorial on twenty twelve theme, the thumbnail is not showing if not use as featured image and the image showing is in original width. Do you know how to solve this issue. I really appreciate if you can help me

Regards
Wayan

Aaron

03rd, Nov, 14

Strange, you could try to add a new image size to your thumbnails and use that instead, to do this add:

add_image_size( 'next-prev-thumbnail', 100, 100, true );

below the add_theme_support(‘post-thumbnails’) snip.

Then to use the new thumbnail, change

?php the_post_thumbnail(); ?>

to

?php the_post_thumbnail('next-prev-thumbnail'); ?>

Yavor Spassov

03rd, Dec, 15

Hi, Aaron,
I think that your idea is great and I’m going to use in my new theme for WordPress.org. However, I was irritated that the styles don’t apply to your code and it took me time to figure it out. I think it will be best if you remove them.
The way I implemented your post navigation in Underscores is as follows:

  • I added the _wptricks-sp-navigation.php file to the inc folder of the theme.
  • I added the new size of the navigation thumbnails to function.php with
    add_image_size('dauntless-single-nav-thumb', 750, 200, true);
  • I called your file in single.php:
    I added the thumbnail sizes to _wptricks-sp-navigation.php on two places:

    the_post_thumbnail(‘dauntless-single-nav-thumb’);

Finally, I styled the navigation with Sass:

nav.navigation {
display: block;
clear: both;
padding: $primary-article-padding; //defined in _index.scss
.post-previous {
float: left;
width: 50%;
text-align: center;
}
.post-next {
float: right;
width: 50%;
text-align: center;
}
}

Bojan

20th, Dec, 15

Thank you!

It’s unbelievable how such small things can bring you faith in the human kindness…
You helped me a lot

juneink

17th, Jan, 17

HI There..
The code is great but when you get to the end of the posts or beginning posts – the next / pre navigation ends.
I was hoping for a full loop from post to post – never-ending. Do you have a version with an ultimate loop.
Or can you point me to a url that demos this?
– juneink

Aaron

04th, Mar, 17

Hi Sorry for the late reply, ive updated my post with the infinate loop.

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]