How to add thumbnails to Posts Navigation


#1

Hello,

I would like to add thumbnails to the posts navigation at the bottom of my single pages.

Is there a plugin or a special code that I can use?

Thanks


#2

Hello there,

Try adding the following function into the child theme’s functions.php file:


function sydney_post_navigation() {
	// Don't print empty markup if there's nowhere to navigate.
	$previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( false, '', true );
	$next     = get_adjacent_post( false, '', false );

	if ( ! $next && ! $previous ) {
		return;
	}
	?>
	<nav class="navigation post-navigation" role="navigation">
		<h2 class="screen-reader-text"><?php _e( 'Post navigation', 'sydney' ); ?></h2>
		<div class="nav-links clearfix">
			<?php
			
				$prevPost = get_previous_post();
				$prevThumbnail = get_the_post_thumbnail( $prevPost->ID, array( 100, 100) );

				$nextPost = get_next_post();
				$nextThumbnail = get_the_post_thumbnail( $nextPost->ID, array( 100, 100) );

				previous_post_link( '<div class="nav-previous"><i class="fa fa-long-arrow-left"></i>'.$prevThumbnail.' %link</div>', '%title' );
				next_post_link( '<div class="nav-next">%link '.$nextThumbnail.' <i class="fa fa-long-arrow-right"></i></div>', '%title' );

			?>
		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	<?php
}

If you don’t want to use a child theme, alternatively you can use Functionality plugin.

Regards,
Kharis


#3

Thank you, that works!


#4

Hello there,

Thank you for updating me. I am glad to know that it works for you.

I am marking this thread as resolved. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

If you don’t mind, could you please rate our Sydney theme here? We would highly appreciate it if you do so.

Regards,
Kharis


#5

Hello,

I know this discussion is 3 year old but I want to do the same thing and the code doesnt work. Do you know what code would work today ?

Thank you,
Jérémy


#6

Hello Jérémy,

Try the below alternative solution.

Firstly add this function with Functionlity plugin or Code Snippets. Or add it to your child theme’s functions.

    add_filter('previous_post_link', 'sydney_child_post_nav_thumbnail', 20, 5 );
    add_filter('next_post_link', 'sydney_child_post_nav_thumbnail', 20, 5 );
    function sydney_child_post_nav_thumbnail($output, $format, $link, $post, $adjacent) {

    	if( !$output ) {
     		return;
      }

      $divclass = '';
      switch ($adjacent) {
    		case 'next':
    			$divclass = 'custom-nav nav-next';
    			break;
    		case 'previous':
    			$divclass = 'custom-nav nav-previous';
    			break;
    		default:
    			break;
    	}

      $arrow_prev = '';
      $arrow_next = '';
      if( 'next' == $adjacent ) {
        $arrow_next = '<span>&#10230;</span>';
      }
      if( 'previous' == $adjacent ) {
        $arrow_prev = '<span>&#10229;</span>';
      }

    	$rel   = $adjacent;
      $thumb = get_the_post_thumbnail($post->ID, array( 100, 100));
      $title = '<div class="'.$divclass.'">' . $arrow_prev . $post->post_title . $arrow_next . '</div>';

    	$class = '';
    	if( !empty($thumb) ) {
    		$class = 'post-nav-has-thumbnail';
    	}

      $string = '<a href="' . get_permalink( $post->ID ) . '" rel="' . $rel . '" class="'.$class.'">' . $thumb;
      $inlink = str_replace( '%title', $title, $link );
      $inlink = $string . $inlink . '</a>';
      $output = str_replace( '%link', $inlink, $format );

      if( !$post->ID ) {
        return;
      }

      return $output;

    }

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .nav-next:not(.custom-nav) > span,
    .nav-previous:not(.custom-nav) > span {
      display: none;
    }

Flus/clear cache if applied. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis