Display Related Post with WordPress Post Thumbnail plus Tooltip
13th Dec 2010 | Posted by Eko S. | 15 CommentsThis tutorial was inspired when we were reading one article on Nettuts+, we really liked their related post section, which appeared imemediately after the blog post content. It’s very impressive 
In this article, you’ll learn how to add it to your WordPress theme using the popular YARPP plugin with wordpress thumbnail function and jquery tooltip effect.
Final Product
You can download the necessary file here: DOWNLOAD
Step 1: Install the YARPP Plugin
We will using a great plugin for related post function, YARPP Plugin. Download YARPP Plugin here, then install the plugin to your site as usual. If you’re installing YARPP for the first time and have questions, I’m going to refer you to the official site for more. This tutorial will start assuming that you have it up and running already.
Step 2: Create related post template file
This plugin give us kebebasan untuk membuat template to display our own related post design. Let’s begin by creating a new file named ‘yarpp-template-thumbnails.php’. And copy paste this code
<?php if ($related_query->have_posts()):?>
<script type="text/javascript">
function simple_tooltip(target_items, name){
jQuery(target_items).each(function(i){
jQuery("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+jQuery(this).attr('title')+"</p></div>");
var my_tooltip = jQuery("#"+name+i);
if(jQuery(this).attr("title") != ""){ // checks if there is a title
jQuery(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(340);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
my_tooltip.fadeOut(200);
});
}
});
}
jQuery(document).ready(function(){
simple_tooltip(".related-post a","related-tooltip");
});
</script>
<ul>
<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail(array(100,100), array('title'=>'')); } else {?> <img src="<?php bloginfo('template_directory') ?>/images/default.jpg" alt="img" /><?php ;}?></a>
</li>
<?php endwhile; ?>
</ul>
<div class="clear"></div>
<?php else: ?>
<p>No related posts found</p>
<?php endif; ?>
Or you can download the template, here. And upload to your root theme folder.
Explanation
- We start our template from the tag
<script type="text/javascript"> .... </script>
Is to create a jQuery tooltip effect.
- The code
the_post_thumbnail(array(100,100),
is to edit your thumbnail image size
- The code
else {?> <img src="<?php bloginfo('template_directory') ?>/images/default.jpg" alt="img" /><?php ;}?>Is for image default if the related post doesn’t have image thumbnail.
- And
<p>No related posts found</p>
Is for the title if there are no related post found
Step 3: Insert into single page
In order to make sure that our related posts show up as intended, let’s manually insert the function into the single.php using the code below.
<div class="related-post">
<h3>Related Post</h3>
<?php if (function_exists('related_posts')){
related_posts();
}?>
</div>
Step 4: Call the jQuery function
To adding the jQuery tooltip effect please add this statement before the wp_head
wp_enqueue_script("jquery");
This statement is needed in order to load jQuery safely.
Step 5: Styling the CSS
Now we will style the CSS, so our related post look beautiful. Open the style.css and at the very bottom add:
#content .related-post h3 {margin: 10px 0 5px 0;}
#content .related-post ul{margin: 0;}
#content .related-post li {list-style: none; float: left; margin-left: 20px;}
#content .related-post img {}
#content .related-post .clear {clear: both;}
.related-tooltip{ position:absolute; z-index:999; left:-9999px; background-color:#dedede; padding:5px; border:1px solid #fff; width: 200px;}
.related-tooltip p{ margin:0; padding:0; color:#fff; background-color:#222; padding:2px 7px;}
Step 6: Setting YARPP option page
Look for the “Display Options for your website” section, and check the “Display using a custom template file” box. This will give you a chance to select the correct template from a dropdown box. Choose “yarpp-template-thumbnails.php” and then save your changes.
Step 7: Adding image thumbnail function
To display related post with image thumbnail we are using the WordPress post thumbnail function, please check our previous tutorial for how to activate this function.
Step 8: Add default image
The wordpress post thumbnail function is a new feature on wordpress start from wordpress 2.9. And if your site is start using wordpress from 2.8 and older of course not all of your post have the image thumbnail. So we will add the default image for the post that doesn’t have image thumbnail.
Upload this image (On the file download above) to “images” folder on your theme folder
!important: please don’t change the image names
That’s All. Hope it useful. And when it comes to adding other features to our related post, your own creativity is the only limit! Feel free to share your ideas in the comments!
This tutorial we made solely to the TwentyTen theme, if you have difficulty in applying this tutorial on your theme. We are willing to provide premium support to you, please contact us via email: dynamicwp[at]gmail[dot]com
About The Author
11 Comments to “Display Related Post with WordPress Post Thumbnail plus Tooltip”
Add Comments (+)-
-
my friend we are very sorry we not use asp for our function. so it is hard to us for doing your request. thanks for your visiting
-
-
kamal says: above function
Trackbacks/Pingbacks
- Display Related Post with WordPress Post Thumbnail plus Tooltip | Speckyboy Design Magazine
- wp-popular.com » Blog Archive » Display Related Post with WordPress Post Thumbnail plus Tooltip
- Display Related Post with WordPress Post Thumbnail plus Tooltip | Wordpress Marketing
- Get Image URL of WordPress Post Thumbnail Feature
hello i am new to jquery and asp.net,please tell me ,how to call this function in asp.net