August 19, 2012 by akhilendra
How To Show Related Posts at the bottom of the posts with thumbnail images in Thesis Theme
How To Show Related Post at the bottom of the posts with thumbnail images in Thesis Theme is a common question asked by thousands of users across globe. There is a tutorial for the same topic on Thesis websites but it doesn’t include details about showing thumbnail images in it. It is a not very had to accomplish.
First of all let us know why it is a good idea to show related posts at the bottom of your each post. If you go through your Google analytics or any other tool which you use to monitor your traffic, you will realize that most of visitors who visit your site are only single page user. That means if they arrived on your site while searching for something on Google, they only read that particular post and leave your website from the landing page itself.
It must be very disappointing for you to see your visitors going away without spending much time on your site. It is a fact that unless until you have a site like BBC or CNN, most of the visitors won’t spend much time on your site. This is why it is so important to show related posts at the bottom of each post at your website.
If you are looking for a way to show related posts at the bottom of the post with;
A specific number of posts
Posts are shown horizontally
Posts are shown with thumbnail images
Title of the post is shown with thumbnail images
You may show post excerpts with a specific number of words.
You can refer to our website at the bottom of this post itself to see how we are using it. You can alter the number of words to show in excerpts. I am not showing any post excerpts so I have made that 0. You can change it to modify to suite your need.
You have to put the below mentioned code in custom.php file,
/* related posts by category */
add_action(‘wp_head’,’custom_add_related_posts’);
function custom_add_related_posts() {
if(is_singular(‘post’))
add_action(‘thesis_hook_after_post’,’custom_display_related_posts’,0,0);
}
function custom_display_related_posts() {
if(is_singular(‘post’)) {
global $post,$blog_id,$thesis_design;
$categories = wp_get_object_terms( $post->ID, ‘category’, array(‘orderby’ => ‘term_id’, ‘order’ => ‘ASC’, ‘fields’ => ‘ids’) );
if(is_array($categories) && !is_wp_error($categories)) {
$out = ”;
$multisite = ($blog_id > 1) ? “&multisite={$blog_id}” : ”;
$self = get_bloginfo(‘url’);
$base = THESIS_SCRIPTS_FOLDER . ‘/thumb.php?’;
$size = intval((intval($thesis_design->layout[‘widths’][‘content’]) – 80)/4);
$rel_posts = get_posts(array(‘cat’ => implode(‘,’,$categories), ‘post_type’ => ‘post’, ‘post_status’ => ‘publish’, ‘posts_per_page’ => ‘4’, ‘orderby’ => ‘rand’, ‘post___not_in’ => array($post->ID)));
foreach($rel_posts as $rel_post) {
$title = apply_filters(‘the_title’,$rel_post->post_title);
$excerpto = apply_filters(‘the_excerpt’,$rel_post->post_excerpt);
$esc_excerpto = esc_attr($excerpto);
$excerpto = custom_trim_text($excerpto,0,false,true);
$esc_title = esc_attr($title);
$title = custom_trim_text($title,100,false,true);
$link = get_permalink($rel_post->ID);
$img_src = get_post_meta($rel_post->ID,’thesis_post_image’,true);
if($img_src == ”) {
preg_match_all(‘/<img.+src=[\'”]([^\'”]+)[\'”].*>/i’, do_shortcode($rel_post->post_content), $matches);
if(is_array($matches[1])) {
foreach($matches[1] as $url) {
if(!empty($url) && strstr($url, $self)) {
$img_src = $url ;
break;
}
}
}
if($img_src == ”) {
$def_imgs = get_posts(array(‘post_type’ => ‘attachment’,’post_mime_type’ => ‘image’,’post_status’ => ‘inherit’,’orderby’ => ‘rand’,’posts_per_page’ => ‘1’));
foreach($def_imgs as $def_img) {
$img_src = $def_img->guid;
}
}
}
$img = “<a href='{$link}’ title='{$esc_title}’ class=’rel_post_img_link’><img src='{$base}src={$img_src}&h={$size}&w={$size}&q=75&zc=1{$multisite}’ height='{$size}’ width='{$size}’ title='{$esc_title}’ alt='{$esc_title}’ class=’aligncenter’ /></a>”;
$text = “<p class=’rel_post_title’><a href='{$link}’ title='{$esc_title}’ class=’rel_post_text_link’>{$title}</p></a>”;
$text .= “<p class=’rel_post_excerpt’>{$excerpto}</p>”;
$out .= “<div class=’rel_post_box’><div class=’rel_post_inner’>{$img}{$text}</div></div>”;
}
if($out != ”) {
$out = ‘<div id=”related_posts”><h3 class=”rel_posts_title”>Related posts by category…</h3>’. $out .'<div class=”clear”></div></div>’;
echo $out;
}
}
}
}
function custom_trim_text($input, $length = 100 , $ellipses = true, $strip_html = false) {
if ($strip_html) {
$input = strip_tags($input);
}
if (strlen($input) <= $length) {
return $input;
}
$last_space = strrpos(substr($input, 0, $length), ‘ ‘);
$trimmed_text = substr($input, 0, $last_space);
if ($ellipses) {
$trimmed_text .= ‘ …’;
}
return $trimmed_text;
}
// end related posts by category
After putting this code in custom.function file now you need to add codes to your custom.css file, here is the code to do that;
/* related posts section */
.custom #related_posts { margin:1.5em 0; width:100%; clear:both; }
.custom #related_posts .rel_post_inner p.rel_post_title a { font-size:12px; font-weight:bold; line-height:1.2em; margin-bottom:0; text-align:left; text-indent:0; }
.custom #related_posts .rel_post_inner p.rel_post_excerpt { font-size:12px; font-weight:normal; line-height:1.6em; margin-bottom:0; text-align:left; text-indent:0; }
.custom #related_posts .rel_post_box a { color:#2A65A1; text-decoration:none !important; float:left; margin-right:1em; }
.custom #related_posts .rel_post_inner img { background-color:#fff; border:1px solid #ccc; margin-bottom:2px; padding:1px; opacity:1; float:left; }
.custom .rel_post_box { display:block; float:left; width:25%; }
.custom .rel_post_inner { border:1px solid transparent; margin:5px 5px 0 0; padding:2px; min-height:210px; }
.custom .rel_post_inner:hover { background-color:#F2F2F2; border:1px solid #ccc; }
.custom #related_posts .rel_post_inner:hover img { opacity:1 !important; }
.custom .clear { clear:both; }
/* end related posts section */
I will suggest you to use FTP to edit your files instead of doing it straight away in your files through wordpress admin dashboard. Make sure to take back up of your custom.function and custom.css files before making any changes.
If you need any help in doing that you can post your comments with your question.
Leave a Reply