Wordpress retrieve thumbnail in theme support - php

Question

I got this problem which my limited capabilities can´t handle. I tried to use the near solutions but does not work the way I expected.
In the post nav previous link I want to retrieve the thumbnail image link and text over the image and make the whole thing clickable and zoom in on it while hovering. Like in the end of http://swordandscale.com/sword-and-scale-episode-100/. But I only manage to get the text. Here is my function,
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-10 col-lg-8 col-lg-offset-2 col-md-offset-1">
<?php
if( have_posts() ):
while( have_posts() ): the_post();
sidekick_save_post_views( get_the_ID() );
get_template_part( 'template-parts/single', get_post_format() );
echo sidekick_post_navigation();
if ( comments_open() ):
comments_template();
endif;
endwhile;
endif;
?>
</div><!-- .col-xs-12 -->
</div><!-- .row -->
</div><!-- .container -->
</main>
</div><!-- #primary -->
/*
========================
SINGLE POST CUSTOM FUNCTIONS
========================
*/
function sidekick_post_navigation(){
$nav = '<div class="row">';
$prev = get_previous_post_link( '<div class="post-link-nav">%link</div>', '%title' );
$nav .= '<div class="col-xs-12 text-center">' . $prev . '</div>';
$next = get_next_post_link( '<div class="post-link-nav">%link</div>', '%title' );
$nav .= '<div class="col-xs-12 text-center">' . $next . '</div>';
$nav .= '</div>';
return $nav;
}

Answer 1

First thing you need to do is open your theme’s single.php file and add the following code inside the loop most likely after the_content() area:
<div id="cooler-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) {?>
<div class="nav-box previous">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100)
);?>
<?php previous_post_link('%link',"$prevthumbnail <p>%title</p>", TRUE); ?>
</div>
<?php } $nextPost = get_next_post(true);
if($nextPost) { ?>
<div class="nav-box next" style="float:right;">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) );
} ?>
<?php next_post_link('%link',"$nextthumbnail <p>%title</p>", TRUE); ?>
</div>
<?php } ?>
</div><!--#cooler-nav div -->
Next thing you need to do is open your style.css file and add the following styles:
#cooler-nav{clear: both; height: 100px; margin: 0 0 70px;}
#cooler-nav .nav-box{background: #e9e9e9; padding: 10px;}
#cooler-nav img{float: left; margin: 0 10px 0 0;}
#cooler-nav p{margin: 0 10px; font-size: 12px; vertical-align: middle;}
#cooler-nav .previous{float: left; vertical-align: middle; width: 250px;
height: 100px;}
#cooler-nav .next{float: right; width: 250px;}
Feel free to change the styling to match it with your theme. Often our users like to style the code, so it makes it easier for them to tweak it. This is just basic styling which you should be able to customize easily.
If you want to change the thumbnail size, then simply change the array(100,100) to whatever you like.
hope that is usefull for you .