Bloggers are always looking for ways to get their readers to read more of their posts. They want to do this by making their posts easy to find. One of the easiest ways to help your readers find similar posts is to add a related posts section to your blog.
However, we don’t want to bog down our website with yet another plugin. Especially when it doesn’t take much coding to do what you want.
Here is a simple how-to for setting up a related posts section at the end of your blog posts.
Related Posts without a Plugin
First things first! You will need to feel comfortable with editing your theme files. If you aren’t comfortable doing this, then it will either be best to hire someone to do this for you or to just download a plugin that has this feature.
You are going to need to edit your functions.php file, create a file and upload it into your current theme’s folder, and either update your stylesheet or add the CSS coding into the additional CSS section of your Genesis WordPress theme.
Step 1
For the first step, we are going to edit the functions.php file. You will just need to add a small piece of code to the very bottom of the file and then save the file. If you happen to follow along with my post on how to add social media buttons to your posts without a plugin, this is very similar. If you have already added this feature to your site then you can skip this part.
/** Add Related Posts on Single Posts **/
add_action('genesis_after_entry', 'include_social', 9);
function include_social() {
if ( is_single() )
require(CHILD_DIR.'/social.php');
}
You don’t need to make any changes to this code. I chose to use the name social.php you could use related.php or anything else to help you identify what this file is for. Just remember what you named it because this is the name of the file you will create in the next step.
Step 2
For the next step, you will need to create and upload the social.php file to your theme’s directory (i.e., wp/content/themes/mytheme/). You can either create the file on your computer and then upload it via FTP or through your cPanel or you can create it directly in your cPanel and insert the following code. The choice is yours.
Use this code if you would like your related posts to be based on the tags of your post.
<div class="relatedposts">
<h3>You may also like the following posts:</h3>
<?php
$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, // Number of related posts to display.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<div class="relatedthumb">
<a rel="external" href="<?php the_permalink()?>"><?php the_post_thumbnail(array(150,150)); ?><br />
<?php the_title(); ?>
</a>
</div>
<?php }
}
$post = $orig_post;
wp_reset_query();
?>
</div>
Use this code if you would like your related posts to be based on the category of your post.
<div class="relatedposts">
<h3>You may also like the following posts:</h3>
<?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'=>4, // Number of related posts to display.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<div class="relatedthumb">
<a rel="external" href="<?php the_permalink()?>"><?php the_post_thumbnail(array(150,150)); ?><br />
<?php the_title(); ?>
</a>
</div>
<?php }
}
$post = $orig_post;
wp_reset_query();
?>
</div>
It will display up to 4 related posts, a link to that post, and a thumbnail image of the post. You can change the line that says “You may also like the following posts:” to whatever you’d like. Just leave it in between the h3 code (this code is styled in the next step).
Step 3
This is where you style the related posts section how you want. This you may need to play with a little to make it work for your site’s layout. You can change any of the settings, just be sure not to mess up the code or it won’t work. Copy this code into your theme’s stylesheet or add it to the “Additional CSS” section of your themes customization section.
.relatedposts {
width: 720px;
margin: 0 0 20px 0;
float: left;
font-size: 14px;
}
.relatedposts h3 {
font-size: 18px;
margin: 20px 0 5px 0;
}
.relatedthumb {
margin: 0 1px 0 1px;
float: left;
}
.relatedthumb img {
margin: 0 0 3px 0;
padding: 0;
border: 1px solid #a9bb13;
}
.relatedthumb a {
color: #99cc33;
text-decoration: none;
display: block;
width: 175px;
}
.relatedthumb a:hover {
color: #ff8000;
}
Obviously, my color codes are based on my theme, so you’ll definitely want to change those to match your theme.
Leave A Comment