This journal entry was posted by Erik Ford 2 years, 279 days ago.
We all know that WordPress is highly extensible with the use of plugins. These added files can instantly transform your website in ways you may not have considered from the onset. But, sometimes, you will run into situations where a plugin just cannot perform the exact task you are looking for.
That was the case for me recently, when I was looking for a related post solution that would not simply display a list of links, but a list of images. I also wanted this list to be generated by using tags. There are quite a few plugins that do the trick of generating related post links very well, and some also had an image solution, but none hit the mark of what I needed. That was until I found this helpful tutorial, entitled Show Related Post in WordPress Without a Plugin by Binny V A. He provides a solution for both tags and categories, which is perfect. (In fact, this is a part of a series he is working on that I highly recommend you read and follow.) But, I still needed a way to display thumbnail images instead of post titles.
The Tutorial
And, like a lightning bolt, it hit me. If I store thumbnail images in a custom field for each post, I can simply call that custom field when querying for the related post. Here is my modified code for this process using tags. Open your single.php file and place the code where you would like the related items to appear before the <?php endwhile(); ?> statement. Please refer to Binny V A’s original post for his original code snippets for both tags and categories.
<?php $backup = $post; $tags = wp_get_post_tags($post->ID); if ($tags) { $tag_ids = array(); foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id; $args=array( 'tag__in' => $tag_ids, 'post__not_in' => array($post->ID), 'showposts'=>5, // Number of related posts that will be shown. 'caller_get_posts'=>1 ); $my_query = new wp_query($args); if( $my_query->have_posts() ) { echo '<h3>Related Posts</h3><ul>'; while ($my_query->have_posts()) { $my_query->the_post(); ?> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="149" height="96" alt="<?php the_title_attribute(); ?>" /></a><?php the_title(); ?></li> <?php } echo '</ul>'; } } $post = $backup; wp_reset_query(); ?>
As you can see, I’ve changed what is displayed in my unordered list item to an image by calling for a predetermined custom field I called “Image”. After that, you can style your unordered list to match your page mock up. Now, how simple was that?
Tutorial Update
With the recent release of WordPress 2.9, we no longer have to store a thumbnail image related to a post in a custom field. We can now leverage the core functionality of <?php the_post_thumbnail(); ?>, which, when properly implemented, will add an option in your Write Post sidebar to choose a post thumbnail from any of the images inside of your post.
First, open your functions.php file and add the following code.
Note that I am using the the thumbnail size from the above code snippet and you should replace it with your own dimensions.
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 149, 96, true );
Once you have saved and uploaded your edited file, you will now have a new option in your Write Post sidebar. All that is left to do is replace the following line of code…
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="149" height="96" alt="<?php the_title_attribute(); ?>" /></a><?php the_title(); ?></li>
with this line of code:
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a><?php the_title(); ?></li>
You now have an incredibly easy solution of adding a thumbnail, without using custom fields, with the related list of post links. If you want backwards compatibility with posts written for older versions of WordPress, replace that line of code with this conditional statement:
<?php if ( has_post_thumbnail() ) { ?> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a><?php the_title(); ?></li> <?php } else { ?> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="149" height="96" alt="<?php the_title_attribute(); ?>" /></a><?php the_title(); ?></li> <?php } ?>
You will now have backward compatibility with themes that were developed for previous versions of WordPress.
dlv @ 9:22 pm on May 25, 2009
great! it’s what i was looking for!
i also see other plugins (Related post with Thumb), also Binny’s post, but this is perfect… combining both.
In my case, i change the way the image was taken. I’m using a php thumb generator instead of take the image from custom field. The only reason is that with custom field image & resize the picture look “crispy”, like with hard sharpen on it
.
Thanks for this tweak, thanks for share
adeux!
Shahin - Rolam Shahin Designs @ 2:12 pm on Jun 09, 2009
Nice and neat Erik, just like your theme itself. I always preferred tweaks over plugins. Great tutorial.
**I think a little bit more details on how the custom field was used in this case could make the post a lot easier for the newbies mate. A lot of people get lost when it comes to custom fields.
Erik Ford @ 1:18 pm on Jun 10, 2009
@Shahin, thanks a lot. When I get the time, I wanted to write a quick little tutorial about custom fields and WordPress.
Shahin - Rolam Shahin Designs @ 7:28 am on Jun 11, 2009
Nevertheless, it’s still a great tutorial Erik
Anil @ 3:09 am on Jun 28, 2009
it was really superb tip, i was searching for this long back ..
check out http://www.shareordie.in
I want to know how to implement same this code for “Random Posts” like
example : http://www.picvi.com .
Help is appreciated …
Jm-Experts @ 11:47 am on Jul 23, 2009
Love this!
kilroy @ 3:21 pm on Jul 23, 2009
very nice, thank you for sharing.
It would be cool if we could insert images into new post based on keywords or tag. So a image named joe-doe.jpg would be inserted if the content of the post included the text “joe doe”
I’ve been search and hacking with no success trying to figure this out.. you got anymore lightning bolts?
Dietmar @ 10:25 am on Sep 14, 2009
I always like such tutorials where people can learn to use php and their own skills to solve a problem instead of installing another plugin. Thanx for this one!
mes @ 10:09 pm on Aug 07, 2010
is there a way to make the related posts random? right now it seems to be bringing up only the latest posts with said tags but i’d like that to always change
thanks in advance!
mes @ 10:17 pm on Aug 07, 2010
nevermind! i added
'orderby' => randto the arguments and it worked perfectlyyadirosadi @ 6:11 pm on Nov 06, 2010
Very useful tutorial, thanks for sharing
begoers @ 12:33 am on Jan 09, 2011
thanks for you share and i like this tips
ma7aba star @ 2:00 pm on Jan 13, 2011
so nice
thanks
John @ 1:40 am on Feb 20, 2011
Awesome! Is there a way to pull the tags only from a certain post type? Maybe using something like ‘post_type=videos’?
Paul @ 1:21 pm on Sep 22, 2011
Nice list. What would you say is better getting related posts by tags or related posts by category?
Erik Ford @ 6:19 pm on Sep 22, 2011
Paul,
I am more partial to tag relationships versus category relationships because of the versatility with tags. At the end of the day, it’s really a personal preference.
Erskin @ 8:36 am on Sep 24, 2011
Not to sound ungrateful. But can you provide a visual or demo so we can see what the end result will look like?
Often times, when I’m planning to invest time into something new I’m always concerned about whether or not the result is worth the effort. BTW, it already sounds awesome and I will give it a try even without a visual or demo… but it would be nice if you put one up at some point in the future. Thanks
Erik Ford @ 10:00 am on Sep 27, 2011
Erskin,
Thanks for the suggestion. We don’t have any plans, at this time, to add video tutorials to the site but will definitely consider the possibility in the future.