Home Thesis

HowTo Add Related Posts with Thumbnails in Thesis Theme Without a Plugin

Written by: Muninder

Updated: February, 22, 2011

You can see that DailyBlogging is now Powered by Thesis Theme and despite of so much coding involved behind the entire site, the loading is quite faster than the previous theme. The main reason behind this is the least usage of plugins.
Plugins are important for a blog, but only when they are light weight. So whenever you need something in your blog, try to implement that using Custom codes rather than using plugins. In case you are a newbie, then checkout the Top 10 WordPress Plugins I use on DailyBlogging.
Make sure that you take proper backups before editing any file. A single mistake in the copy-pasting process would give out an error.

Related Posts With Thumbnails

Related Posts with Thumbnails Without a Plugin
Related Posts below your post area not only help in reducing your bounce rate but also pass on some SEO juice to those related post links. Moreover a thumbnail associated with it would attract more and more clicks thereby making your visitors stay a little longer on your site. So here is how you add Related Posts with Thumbnails in your Thesis Theme. Open your
custom_functions.php file located in Thesis theme’s Custom folder and add the below code,

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'=>5,
'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>Read them too</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');

Then navigate to your custom.css file which is also located in the custom folder and add the following code,

.custom #related_posts ul {
    margin: 0;
    overflow: hidden;
    padding: 5px 0;
}
.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;
}

Get Thesis Theme for your WordPress Blog

Due credits to Thesis-Blogs for the php Code. I’ve just styled (CSS) his code in a better way.
If you liked the Tutorial then you can always Subscribe to Our RSS Feeds / Daily Updates.
Are you also of the view that one should use less no. of plugins on his/her WordPress Blog ?

by

Copyright @2021 Dailyblogging.org