How to Add Related Posts with Thumbnails on Genesis Theme Framework without Plugins

Bloggers, whatever their reasons for blogging are certainly want visitors who come to their site can stay longer and reading more. You want them to read your post, interested in your call to action and finally buy your services, being subscribers, or purchase a product you have reviewed and offered to them.

Those things I mentioned above are the reason why someone want their visitors spend more times on their site. If there should be a page opened, then you are all must be hoping that the page is profitable. If not, then the visitors should read another posts or pages until they find something really interesting for them to buy. One way to keep your visitors to stay on your site is to offer other related articles.

And the great thing is, it is easy to do it on WordPress

WordPress is very easy to use by anyone, even if you are a beginner. If you want additional features, you just need to install plugins. The problem is that you do not want to make your site load very slowly because it must call a lot of scripts and code.

This reason makes some bloggers are prefer to do it without plugins.

This time I will give you the code to make the related posts with thumbnails without plugins. The basic code is created by WP Beginner here. I created this tutorial for the users of Genesis Framework by StudioPress Themes. For users of wordpress or thesis themes, you must read this tutorial. It’s just that if you use Genesis Child Themes you probably have never read it.

Again, It’s  easy.

Copy the code below and paste it into your file editor, I use Notepad++, and save it with the name of the related-posts.php

<!--?php $orig_post = $post; global $post; $categories = get_the_category($post--->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 2, // Number of related posts that will be shown.
'caller_get_posts'=>1
);

$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '</pre>
<div id="related_posts">
<h3 style="margin-top: 10px;">Related Posts</h3>
<ul>
<ul>';</ul>
</ul>
<ul>
<ul>while( $my_query->have_posts() ) {</ul>
</ul>
<ul>
<ul>$my_query->the_post();?></ul>
</ul>
<ul>
<ul>
	<li>
<div class="relatedthumb"><a title="<?php the_title(); ?>" href="<? the_permalink()?>" rel="bookmark">
<!--?php if ( has_post_thumbnail() ) { the_post_thumbnail( array(100,100) ); } else { ?-->
<img src="YOUR-DEFAULT-IMAGE-URL" alt="<?php the_title(); ?>" />
<!--?php } ?-->
</a></div>
<div class="relatedcontent"></div></li>
</ul>
</ul>
<ul>
<ul>}</ul>
</ul>
<ul>echo '</ul>
</div>
<pre>';
}
}
$post = $orig_post;
wp_reset_query(); ?>

Don’t forget to change YOUR-DEFAULT-IMAGE-URL to your own URL. After that upload it your Child theme folder.
Copy and paste this code in the functions.php file in the Genesis child themes you use.

// Display Related Posts after Content
add_action( 'genesis_before_comments', 'related_posts');
function related_posts() {
if (is_single()) {
require(CHILD_DIR.'/related-posts.php');
}}

Copy the code below and paste it into your style.css file.

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

Note: Just paste the file to the child themes you will not be lost when you update the Genesis Framework by StudioPress Themes.

Want me to do it for you?

Do not want to Ruin your site, and not really sure how to do it. Buy me a cup of Starbuck’s Coffee, and I will do it for you.

Ask Ros to add Facebook comment box to Your site

Yes Ros, please help me to customize Genesis Framework and Child themes on my WordPress site/blog. Add Facebook comment box yo my site.
Price: $5.00