Do you like to show related posts in WordPress without plugin? Showing related posts is a proven method to encourage your visitors to stay longer on your WordPress website and possibly become your customers. In this article, I’m going to show you how to display related posts at the bottom of each post selected from the post tags.
What this video on how to show related posts in WordPress without plugin
Why show related posts in WordPress?
WordPress.org is the most popular content management system (CMS) in the world. Over 40% of all websites are already on WordPress. This staggering percentage is NOT accidental. WordPress has been designed to host an unlimited number of posts or pages on your web server in an effective way.
As the number of your posts increases over time, you might like to encourage your visitors to continue reading some other related content on your website. This way, you can minimize your bounce rate and maximize pages per visit and average visit duration. This is because your visitors will stay longer on your WordPress website, become more acquainted with your brand, and follow you on social media.
Show related posts in WordPress with php
The following php code should be added to the end of your theme files, such as single.php or page.php that are responsible for posts and pages on your website. Fortunately, you don’t need to add any other code snippet to your functions.php file. This code will show related posts in WordPress without plugin at the bottom of each post.
<?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 that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h3>Related Posts</h3><ol>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time('M j, Y') ?>
</div>
</li>
<?php }
echo '</ol></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>How to tweak the php code to show related posts
First of all, you should know that the above code will fetch and display 3 recent posts selected from the used tags in your current post. You could also display related posts from categories, which I don’t recommend. This is because WordPress tags are intended to connect all WordPress posts that are thematically or topically related.
As a result, if your post lacks any tag, nothing will be displayed as related posts, which sounds totally logical. To get a better picture of this point, scroll down to reach the bottom of this post to explore the 3 related posts for the article you’re reading now. As a matter of fact, tags in WordPress are like indexes at the end of a book, while categories are similar to the sections or chapters of a book.
You can alter the number of related posts from 3 to any value by changing the default value “3” on line 10 of the php code. Just bear in mind that more than 5 related posts are not recommended because it can take up a high volume of computing resources of your web server. The publishing date of each related post is also displayed below it.
Best SEO practices for WordPress tags
Although tags as a type of taxonomy in WordPress give you this special chance to organize content thematically, you should never overuse them. This was a blatant mistake I was making back in 2015 when I founded LELB Society on WordPress for the first time. In short, at that time, I was using too many irrelevant tags for almost each post and I was not aware of Google Penalty for this immature action.
The maximum number of tags in each post is 10 and all of them should be thematically relevant. Moreover, avoid making the same mistake as I did by indexing your tags. Tag pages are not really important because they might hold thin content, which should not necessarily be indexed by search engines. If you’re using a WordPress plugin for SEO, don’t forget to No Index tags.
You can also auto-link all tags in the body of posts. This way, tags appear as hyperlinks inside posts, and your visitors might be more motivated to click on them. To add this functionality to your WordPress website, simply add the following php code to your functions.php file:
add_filter('the_content', 'auto_link_tags');
function auto_link_tags($content){
//$post_id = get_the_ID();
$post_tags = get_the_tags();
if ($post_tags) {
$i = 0;
foreach($post_tags as $tag) {
$tags[$i] = "~<(?:a\\s.*?</a>|[^>]+>)(*SKIP)(*FAIL)|\\b(?:\\b(" . $tag->name . ")\\b(?=[^>]*(<|$)))\\b~i";
$tag_url = get_tag_link($tag->term_id);
$tag_html[$i] = '<a href="' . $tag_url . '" title="$1">$1</a>';
$i++;
}
$content = preg_replace($tags, $tag_html, $content);
}
return $content;
}Customize your related posts with CSS
If you like to customize your related posts with css, you need to call this section with #relatedposts in your css customizing application, such as WordPress Customizer, child theme or a WordPress plugin. To have more information on the best practices for adding css in WordPress, study this article on social share buttons in WordPress without plugin. Since at LELB Society, I’ve consciously selected a minimalistic design, I’ve only added the following css lines to our child theme:
#relatedposts {
padding-left:15px;
background:#fff;
}Show a list of related posts in WordPress without images
If you don’t plan to include featured images in your related posts for any reason, you might opt for the following php snippet, which should be installed in the same place, i.e. at the bottom of your single.php file. This php code is so plain and can only show related posts in WordPress without plugin in a simple list of post titles without any image:
<?php
$tags = wp_get_post_tags( get_the_ID(), [ 'fields' => 'ids' ] );
$related = new WP_Query( [
'tag__in' => $tags,
'post__not_in' => [ get_the_ID() ],
'posts_per_page' => 5,
'ignore_sticky_posts' => true,
'orderby' => 'rand',
'no_found_rows' => true,
] );
?>
<?php if ( $related->have_posts() ) : ?>
<section class="related-posts-wrapper">
<h2><?php esc_html_e( 'Related Lessons', 'dorzki' ); ?></h2>
<ul class="related-posts">
<?php while ( $related->have_posts() ) : $related->the_post(); ?>
<li class="post-wrapper">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
</section>
<?php endif; wp_reset_postdata(); ?>In the above php code, related posts are shown randomly. You can modify the order of related posts by changing the following line of code: ‘orderby’ => ‘rand’, Simply replace ‘rand’ with the following options:
- ‘orderby’ => ‘modified’,
- ‘order’=> ‘ASC’,
- ‘order’=> ‘DSC’,
Visual dictionary and thesaurus with related visual words
It’s important for us to show related posts in WordPress without plugin at LELB Society because our community has the largest visual dictionary of academic words in real context. Our students can learn English vocabulary with pictures easily with over 2830 English vocabulary in context with images. As you can guess, our educational platform can show related posts in WordPress without plugin in the form of 3 synonyms or topically related vocabulary items to each word entry in our picture dictionary and thesaurus.
If you have any question on how to show related posts in WordPress without plugin, leave them in the comment box below. I’ll respond to all questions and opinions immediately.
