How to show post thumbnail on Text link hover in WordPress


It was another question asked by old friend who is using my Wallpaper WordPress theme ,  He wants to show a thumbnail whenever a visitor hover mouse over a text linkSo it was my task to enable thumbnail on Previous and Next Post links that used to appear at the end of each post.

By default this is not available in almost most of the WordPress themes. Some premium theme are implementing this feature to attract more pageview.

Show Post Thumbnail  on Text Link Hover

Previous and Next Post Thumbnail on Text Link Hover

To get this effect you are required to make some changes in your single.php file.  Single.php file is basically used to display a single post in your WordPress blog. Since we are trying to provide hover effect on Previous and Next text link, We have to locate pagination  code in our single.php file. Pagination code of previous and next post look like this.

<div style="margin:10px;">
<div >
<?php previous_post('&laquo;&laquo; %', 'Previous: ', 'yes');?> </div>
<div>
<?php next_post('% &raquo;&raquo; ','Next: ', 'yes'); ?></div>
</div> <!-- end navigation -->

In the above code next_posts_link( )  and previous_posts_links() functions are responsible to find out next post links and previous post link. These two function not only find out a perfect Previous Post link but also display them as a text Links.

Few websites, now a days does not display this code, instead of that they display some related articles. That code sometimes looks like this.

<div>
<h3 style="margin-left:10px;margin-top:45px;margin-bottom:10px;">Related Wallpaper </h3>
<div>
<?php if(function_exists('related_post')):?><?php related_post($post);?><?php endif; ?>
</div>
</div>

So if you want to replace your Previous Post Next Post text Links with their relevant thumbnails then replace your navigation Code with this code.

<?php $prev = get_previous_post(); $next = get_next_post();

	<div>
		<a href="<?php echo get_permalink($prev->ID); ?>" title="<?php echo esc_attr($prev->post_title); ?>">
			<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>
		</a>
	</div>

	<div>
		<a href="<?php echo get_permalink($next->ID); ?>" title="<?php echo esc_attr($next->post_title); ?>">
			<?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>
		</a>
	</div>

The above code use featured image feature of post, to enable this feature open your functions.php file and add the following line in that

 add_theme_support( 'post-thumbnails' ); 

But as I have mentioned in this post title, Our main objective is to show Previous and Next Post Thumbnail on text link hover and our current code is not able to show text links instead of that, this code display thumbnails, So we need another code with some modification.

<div style="margin:10px;">
<div >
<?php //previous_post('&laquo;&laquo; %', 'Previous: ', 'yes');
$prev = get_adjacent_post(true,'',true) ;
?>

&laquo;&laquo;<a id="prev" href="<?php echo get_permalink($prev->ID); ?>" title="<?php echo   esc_attr($prev->post_title); ?>">
<?php echo $prev->post_title; ?>
</a>
<div id="prevhidden"><?php echo get_the_post_thumbnail($prev->ID);?></div>
</div>
<div>
<?php //next_post('% &raquo;&raquo; ','Next: ', 'yes');
$next = get_adjacent_post(false,'',false) ;
?>
&raquo;&raquo;<a id="next" href="<?php echo get_permalink($next->ID); ?>" title="<?php echo esc_attr($next->post_title); ?>">
<?php echo $next->post_title; ?>
<div id="nexthidden"><?php echo get_the_post_thumbnail($next->ID);?></div>
</a>

</div>
</div> <!-- end navigation -->

Now  open your style.css file and paste the following css IDs  to style.css file

  #prevhidden{position:absolute;left:10px;z-index:100;border:4px solid #e7e7e7;}
#nexthidden{position:absolute;right:10px;z-index:101;border:4px solid #e7e7e7;}

Till Now all our elements are now in place its time to give them the functionality to your mouse hover effect.

Open your footer.php file and paste the following code , Just before </body> tag


<script type="text/javascript">
jQuery(function($){
$("#prevhidden").hide();
$("#nexthidden").hide();

$("#prev").mouseenter(function(){
$("#prevhidden").show();
});

$("#prev").mouseleave(function(){
$("#prevhidden").hide();
});

$("#next").mouseenter(function(){
$("#nexthidden").show();
});

$("#next").mouseleave(function(){
$("#nexthidden").hide();
});
});
</script>

Save your work and refresh your browser window to see  Thumbnails on Text Link hover. Cheers !




8 Brilliant Comments - Join Discussion Now!

  1. Stephan says:

    Nice sharing
    very useful for people like me, all the steps are detail and easy to follow up.
    thanks for your information.

    stephan

  2. It’s mean we can add these code in Premium WordPress theme easily. I am using WordPress free premium theme. I will follow these rules for my site.
    Any way thanks for this.

    • rakesh says:

      Dear Areesha Noor, These are the features most premium themes does not want to reveal to their readers.You are free to use this according to your need. Keep in touch for such wonderful articles.

  3. Help full Tutorial. I will bookmark this page. I will need these information soon. Thank you author.

  4. Rudd says:

    Pretty cool. This is kind of giving the users teaser or an overview of the article. However, make sure you’ve used nice featured images for all posts

    • rakesh says:

      Nice images for every post is not possible thus used featured image for this effect. Thank Rudd for stopping by. Keep in touch

  5. Pretty good article. Much needed for me. Will take time later to read it completely. Bookmarking it right away. Cheers. Well done,!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>