Add Related Posts with Thumbnails to Thesis Without Using a Plugin

Displaying related posts below your posts is one way to help interlink your content through out your site, but many of the plugins available have a darker side to them. The fact is they quite literally spam the database with vast amounts of requests in the form of queries. Many of you may have had an experience where your host has temporarily disabled your site, or suddenly when loading a post during the peak traffic hours internal server errors have appeared.

Are you one of those unfortunate people?

For those who have had this experience and are using the following plugins:

Yet Another Related Posts Plugin

WordPress Related Posts

and other such plugins that perform a similar role then I would strongly recommend moving away from them, if you have a very small site it might now be much of a problem, for larger sites with 100s of posts, consider this, each time your site loads it must query all those posts in order to display them below your posts. The more posts the more queries.

Add the extra style sheets and javascript and it makes for a problematic plugin.

Why not consider hardcoding

For Thesis users: You only need to edit two files, custom.css and custom functions.php

For those a little nervous about hard-coding in php, it’s simpler than you think.

Thesis works in a different way, using classes and hooks to deliver the content, so if you opened the main index.php file you would only see this.

thesis_html_framework();

Dont know what thesis is? Check it out today, you won’t be dissapointed.

Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Now for the code

Add this to your custom functions.php, remember this is for Thesis users.

add_theme_support( 'post-thumbnails' );
add_image_size( 'related-posts', 100, 100, true );
function related_posts() {
if ( is_single() ) {
$orig_post = $post;
global $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),
'posts_per_page'=>4,
'caller_get_posts'=>1,
'orderby'=>'rand'
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts" class="clear"><h3>You may also like...</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<li>
	<a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">
		<?php the_post_thumbnail( 'related-posts' ); ?>
	</a>
	<div class="related_content">
		<a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
	</div>
</li>
<? }
echo '</ul></div>';
} }
$post = $orig_post;
wp_reset_query(); ?>

<?php } else { } }

add_action('thesis_hook_after_post','related_posts');

Note, check you custom functions.php files for this line

add_theme_support( 'post-thumbnails' );

Basically this adds the generic thumbnail support to Thesis, Thesis uses it’s own system, but for this to work, we need to add that support. If you have added this before for some other reason, then you don’t need to add it again.

I have seen tutorials before that have offered a similiar code but missed that bit out about the post thumbnails so remember to add it if you already havn’t or it wont display thumbnails.

You can also change the text that appears above the related posts by editing this line

echo '<div id="related_posts" class="clear"><h3>You may also like...</h3><ul>';

Just change the text between the H3 tags and your good to go.

Let’s give it some styling…

For my site im using the following CSS, you may want to edit it and make some changes to suit you sites design.

.custom #related_posts li {
    float: left;
    list-style: none;
    margin: 0 0 0 20px;
}
.custom #related_posts li:first-child {
    margin-left: 3px;
    padding-left: 8px;
}
.custom #related_posts li a {
    border-bottom: medium none;
    display: block;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
    text-decoration: none;
    width: 111px;
}
.custom #related_posts li a:hover {
		text-decoration:underline;
}
.custom #related_posts li a img {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #E1E1E0;
    height: 100px;
    padding: 4px;
}
.custom #related_posts li a img:hover {
    background: #DDD;
    border: 1px solid #CCC;
}
.custom #related_posts {
    height: 270px;

And that should just about do it.

If you have any problems please feel free to contact me and I would be happy to take a look and improve the code as needed.

Got a problem, or question you just can’t figure out then feel free to contact me and I may just write a post for you.

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

26 comments… add one
  • Ayyapillai Aug 31, 2012, 2:47 pm

    Thanks for your grateful PHP Tutorial informations.

  • Jason Mathes Aug 31, 2012, 4:21 pm

    I was playing around with this. The issue I have is that I am already using this hook for a “Post_Footer” function for my author box and “shoutout/signup” area.

    I would really like to use this though. Any ideas on how I could tweak this a bit?

    • Matthew Horne Aug 31, 2012, 4:24 pm

      Can you paste the code your currently using so I can see where it would fit in. I have a test site that I can quickly use.

    • Matthew Horne Aug 31, 2012, 4:34 pm

      You could fit the code in to the same hook, or hook in the thesis_hook_after_post_box which should place it below.

  • Jane Aug 31, 2012, 10:34 pm

    Thank you this was exactly what I was looking for. Now I can finally upload those beautiful thumbnails. Thanks Matthew!

  • Barry Wells Sep 2, 2012, 3:25 pm

    Hi Matthew, I’ve just come from JustReTweet after seeing your tweet there.

    You’re bang on with the YARPP plugin, i’ve suffered that myself 🙁 I’m not using Thesis as yet but am considering an upgrade, so this will come in handy.

    Really easy to follow your guide here, thanks Matthew 🙂

    Barry

    • Matthew Horne Sep 2, 2012, 3:27 pm

      Hey no problem, if there is anything I can do to help spread the blogospere then im all over it lol. Ive worked on 100s of sites and all sites using those kind of plugins suffer from them. Some have even had their site taken down by the server because it was using to much of the resources for that cluster.

  • Tiffany Sep 9, 2012, 6:59 pm

    I paste the first code into my custom file editor and got an error message when I pressed the save button… Any suggestions or could I send you my file?

    • Matthew Horne Sep 9, 2012, 7:01 pm

      Sure send me the file and I would be happy to take a look, its possible you already have something hooked into the hook being used.

  • Marketcalls Feb 4, 2013, 11:59 pm

    Does this works with Thesis 2.0 . I thought of removing my wordpress related post plugin. Need confirmation prior to removing that.

  • Chris_Moir Feb 20, 2013, 11:15 pm

    Hi Matthew this is a great tip, thanks! I have taken your php code and added it to my site. The only issue I am having is the bullets are not lining up with the posts (I am using Firefox, latest version) http://pdfelectronics.com/18w-plexi/ Do you know why this is?

    Also where do you put that CSS code you showed for styling?

    Thanks!

    • Chris_Moir Feb 20, 2013, 11:30 pm

      Ok I figured out my second question but I am still having some formatting issues.

      • Matthew Horne Feb 21, 2013, 7:04 am

        remove this. custom #related_posts li:first-child and the associated CSS. I believe I added that for when images are used.

        • Chris_Moir Feb 21, 2013, 4:30 pm

          Thanks! That was exactly the issue.

          Do you happen to know why there is a bunch of white space below the related posts?

          • Matthew Horne Feb 21, 2013, 4:33 pm

            .custom #related_posts remove this, the height was set for a more specific style.

          • Chris_Moir Feb 21, 2013, 4:59 pm

            Lines 1-7?

          • Matthew Horne Feb 21, 2013, 5:02 pm

            Just the one with the fixed height, line 32 33 above.

  • Vadim K May 30, 2013, 7:25 pm

    Thank you Matthew for this post.I followed the steps and have added the code to the site, and everything seems to work but it shows text only. How can I implement image thumbnails as well?

    • Matthew Horne May 31, 2013, 6:29 am

      If you go to the post editor, you should see a new option on the right side, called set featured image. Once you set an image, it will display on the blog.

  • Catatan Belajar Jun 16, 2013, 9:17 am

    Thanks Matthew. Great tutorial help a lot.

  • aries Sep 10, 2013, 4:04 pm

    This tutorial very help me, thanks a lot Matthew…

  • Irvin Mar 13, 2014, 12:50 am

    The selection of post is according to $tags ? how do I make it as according to $category ?

Leave a Comment