Want to have more control over the related posts you show at the end of your posts? This tutorial will show you how to easily add related posts without the use of a plugin – and with the ability to add specific posts you want to show!
Showing WordPress related posts by categories is not the best way to show related content.
Neither is showing them by tag – or randomly.
But that is what most of the more common related posts plugins for WordPress offer – and we wanted to do it differently
Imagine having the ability to pick and choose the EXACT posts you want to show as related to an existing post!
It can be done – and with limited resource load and no code bloat – and we are going to show you how!
What are WordPress related posts?
WordPress related posts are a great way to show visitors additional content that you may have on your website that is related to the current post they are reading. They are typically shown at the bottom of your single posts.
Many use plugins to do this that can show related posts based on categories or tags – but these can limit the effectiveness of delivering properly related posts and are also resource hogs as it has to search the database to find posts within those categories or tags.
What will this tutorial do?
If you are a food blogger and you have a post about “Honey Baked Chicken” – with this tutorial you can choose a specific post like a side dish and beverage to show them a “completed meal” idea – or you can show them 2 other “Honey Dinner Recipes”.
How you use it is totally up to you – but using it will help you provide a better user experience which in turn will help with rank and repeat visitors!
Yoast has an internal linking tool that will do something similar to this tutorial but it is a paid plugin – this tutorial is free! We have never used the Yoast tool and are not familiar with it, but it is an option if you are interested!
But, imagine having a way to show WordPress RELATED POSTS that you pick and choose – for free and is easy to use. Image no more showcasing by category or tag – but manually selected the exact posts you want to show – for free!
As with all of our WordPress tutorials, like our Custom Gutenberg Block tutorial – we are pretty confident that what we outline below will work in most environments, but without knowing your specific WordPress development setup – there may be some conflicts.
Please do a backup before trying this tutorial – or any tutorial for that matter! Good habits = less stress!
What You Will Need For This WordPress Tutorial
- Install the Advanced Custom Field plugin (this is a goldmine of a plugin for free and we will do future tutorials using this plugin – so you will have a chance to use it more in the future.)
- Make sure you have access to your single.php file to add some code
- Make sure you have access to your stylesheet to add some styling options
How Many Steps Are there In This Tutorial?
Less than you may think! WordPress and Related Posts are as easy as pie to do with this simple guide.
Here is the exact steps for the tutorial.
1. Create your custom “related posts” field group in ACF
2. Add 2 custom fields to the group – 1 for a title and 1 for the posts.
3. Add the provided PHP code to your single post template file
4. Add the provided CSS code to your stylesheet
5. Go to your post and add some posts!
What The WordPress Related Posts Will Look Like
We wanted to show you what we will be creating today!
This Related Posts tutorial will offer you 2 options to show your related posts as shown below.
Note: the links for these examples are highlighted in blue because that is how they are on our website, we did not include the code for this and the links will show by default as links are on your website.
3 Column Grid With Images
Horizontal List With No Image
Setting Up Your Advanced Custom Fields
Once you install Advanced Custom Fields you will do the following steps to get your fields in place.
Creating An Advanced Custom Field Group
A field group with ACF is a “group” of fields that are specific to a post or page. So we will need to create a field group for “related” posts which will then have 2 fields inside it.
To create your Related Posts field group:
1. Go to CUSTOM FIELDS
2. Click ADD NEW
3. For the title you can enter RELATED POST
4. Now you can go to Field 1 instructions below to add your Related Post Title Title
Field 1 – Related Posts Title
This field provides a text box where you can enter a Related Post Title above your posts. In the images above you can see we are using the text “More Gutenberg News” since our posts are all Gutenberg related – which is relaying that the related posts are directly related to the post they are on.
Adding your Related Posts Title field:
1. Click ADD FIELD
2. For field Label you can enter Related Post Title
3. Click the Field Name box so it auto populates – (it should say related_post_title this is important!)
4. For Field Type select TEXT
5. Now you can go to Field 2 instructions below to add a field to add your Related Posts
Below is an image of how your field should look when it is done.
Field 2 – Related Posts
This field provides a box where you can add multiple related posts to show on your post.
Adding your Related Posts field:
1. Click ADD FIELD
2. For field Label you can enter Related Post
3. Click the Field Name box so it auto populates – (it should say related_post this is important!)
4. For Field Type select POST OBJECT
5. Filter by Post Type – select the POST option
6. Select Multiple Values – select YES
7. Return Format should be set to Post Object
5. Now you can go to Field 2 instructions below to add a field to add your Related Posts
Below is an image of how your field should look when it is done.
Final Field Steps
1. Under LOCATION show this field group should be set to POST TYPE then IS EQUAL TO then POST as shown in the image below.
2. Click UPDATE and now your field is created
Adding The ACF Code
Now that we created the field for your related post information, we need to tell the website how and where to display it.
This part of the tutorial will be dependent on your theme so this is the part that you may have a little difficulty with.
Below we are providing code for implementing these fields in a Studiopress theme and a standard WordPress theme like TwentyNineteen.
General Theme Integration
This code is standard for most WordPress themes and was tested in the content-single.php file in the Twenty Nineteen theme as well as a standard single.php file and worked perfectly.
<?php
$post_objects = get_field('related_post');
if( $post_objects ): ?>
<div class="relatedposts"><h3><?php the_field('related_post_title'); ?></h3>
<ul class="related">
<?php foreach( $post_objects as $post_object): ?>
<li>
<?php echo get_the_post_thumbnail( $post_object->ID, 'thumbnail' ); ?><br />
<a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>StudioPress Theme Integration
For those on Genesis/Studiopress which is what we primarily work with, you will want to modify your single.php file in your child theme to get the WordPress Related Posts working.
Do not have a single.php file in your child theme? Below is the full code for our Single.php file that you can copy and paste into your own – this code is ONLY IF YOU DO NOT have a currently customized single.php file.
<?php
$post_objects = get_field('related_post');
if( $post_objects ): ?>
<div class="relatedposts"><h3><?php the_field('related_post_title'); ?></h3>
<ul class="related">
<?php foreach( $post_objects as $post_object): ?>
<li>
<?php echo get_the_post_thumbnail( $post_object->ID, 'thumbnail' ); ?><br />
<a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>Already have a single.php file in your child theme? If you already have some custom code in your single.php file then you will want to add the code below to your existing code. The line add_action with the 20 at the end may need to be adjust to ensure that the related posts sit at the bottom of the post.
add_action( 'genesis_entry_content', 'td_related', 20 );
function td_related() {
$post_objects = get_field('related_post');
if( $post_objects ): ?>
<div class="relatedposts"><h3><?php the_field('related_post_title'); ?></h3>
<ul class="related">
<?php foreach( $post_objects as $post_object): ?>
<li>
<?php echo get_the_post_thumbnail( $post_object->ID, 'thumbnail' ); ?><br />
<a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif;
}Adding The Styling
The code below is what we are using to style the layout of the WordPress related posts as shown in the images above.
You can choose the option to display 3 across or to display them horizontally with no image by simply copying the one of the following CSS snippets into wherever you add custom CSS. (Some add it in their editor area – others add it right into their style.css file)
3 Column Related Post Grid CSS
.relatedposts{padding:50px 0}
.relatedposts h3{text-align:center;margin-bottom:20px}
ul.related{display:flex;margin-left:0}
ul.related li{width:33%;display:block;text-align:center;margin-right:12px;line-height:1.5em}
ul.related li:last-of-type{margin-right:0}
@media only screen and (max-width: 768px) {
ul.related{display:block}
ul.related li{width:100%;margin-right:0;margin-bottom:20px}
}Horizontal Related Post Grid With No Image CSS
.entry-content ul.related{display:block}
ul.related li{display:flex;width:100%;margin-bottom:20px;padding:20px;background:#f8f8f8}
ul.related li img{display:none}Adding Related Posts To A Post
Now you can go to any post and if you will see a new section called Related Posts where you can enter your custom Related Posts Title and select the posts you want to show.
Simply click in the Related Post field and start typing and the dropdown will populate with related posts to the words you are typing. Select as many posts as you would like!
Why This Is A Great Related Posts Option
Basically it is the most lightweight option out there for creating Related Posts in WordPress and by doing it with custom code you can easily modify it as you grow and change your look and feel or require different needs.
This code can be used to show posts on pages if you are creating landing pages for example – there is a lot of flexibility as to how you use this code.
The best part is the total custom ability to choose the exact posts you want to use!
