Adding related posts to your blog can help keep readers engaged. It can also reduce your bounce rate. This means visitors stay on your site longer.
Usually, people use plugins for this. But you can do it without a plugin. This guide will show you how. It is simple and easy.
Credit: pluginsforwp.com
Credit: www.jodineufelddesign.com
Why Add Related Posts?
Related posts help readers find more content they like. They improve user experience. They also help with SEO. Google likes it when visitors stay longer on your site. <pRelated posts are a win-win. They help you and your readers.
Steps to Add Related Posts With Thumbnails
Follow these steps to add related posts with thumbnails to your blog.
Step 1: Edit Your Theme
First, you need to edit your theme. This step is crucial. You must access your theme files. You can do this from your WordPress dashboard.
- Go to Appearance.
- Click on Theme Editor.
- Select your theme.
- Find the single.php file. This file controls single post pages.
Be careful while editing theme files. Always back up your files before making changes.
Step 2: Add Code To Display Related Posts
Next, add code to display related posts. You need to add this code to your single.php file. Here is a simple code snippet:
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'=> 3, // Number of related posts to display.
'caller_get_posts'=> 1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo 'Related Posts
';
while( $my_query->have_posts() ) {
$my_query->the_post();
?>
- php if( has_post_thumbnail() ) the_post_thumbnail(); ?
php
}
echo '';
}
}
$post = $orig_post;
wp_reset_query();
?>
</code
This code does the following:
- Gets the tags of the current post.
- Finds other posts with the same tags.
- Displays the related posts with thumbnails.
Step 3: Style Your Related Posts
Next, style your related posts. You want them to look good. Add CSS to your theme’s style.css file.
.related-posts {
list-style: none;
margin: 20px 0;
padding: 0;
}
.related-posts li {
display: inline-block;
margin: 0 10px;
text-align: center;
}
.related-posts img {
width: 150px;
height: auto;
}
.related-posts h3 {
font-size: 1.5em;
margin-bottom: 10px;
}
This CSS will make your related posts look neat. You can adjust the CSS to fit your theme.
Step 4: Test Your Changes
Finally, test your changes. Make sure everything works. Check a few posts on your site. Look for the related posts section. Make sure the thumbnails are showing.
If you do not see the related posts, check your code. Make sure you copied it correctly. Look for any errors.
Benefits of Adding Related Posts
Adding related posts has many benefits. Here are a few:
- Improves user experience.
- Helps readers find more content.
- Increases page views.
- Reduces bounce rate.
- Helps with SEO.
Related posts keep readers on your site longer. This is good for your blog.
Frequently Asked Questions
How Do I Add Related Posts With A Thumbnail?
Use a plugin or a widget to add related posts with thumbnails. Many options are available.
What Are The Best Plugins For Related Posts Thumbnails?
Popular plugins include YARPP, Related Posts Thumbnails, and Jetpack. They are easy to use.
Can I Add Related Posts Without A Plugin?
Yes. Use custom code in your theme’s files. It requires some coding knowledge.
Are Related Posts Good For Seo?
Yes. They improve user engagement and reduce bounce rates. This can positively impact SEO.
Conclusion
Adding related posts with thumbnails is easy. You do not need a plugin. Just follow the steps in this guide. Edit your theme. Add the code. Style your related posts. Test your changes.
Related posts can improve your blog. They keep readers engaged. They help with SEO. They are worth the effort.
Try adding related posts to your blog today. See the benefits for yourself.
