Related posts is one of the mostly looked for features in WordPress. The demand comes from being used in a lot of blogs, news sites, and corporate websites. There are so many choices out there that caters for such a feature. Even Automattic, the guys behind WordPress, has the feature available in their JetPack plugin.
The only thing is most of those plugins have so much into it that I am not really wanting to have. They come with a bit of baggage that I do not really need. So ACF comes to the rescue since I have been using it for most of my needs why would I install something else when I can achieve what I need using it.
What we are actually achieving here is showing three related posts in a grid format that show the featured image, title and an excerpt max of 20 words. The way this is implemented is to allow you to choose which posts you want to show. This way you have more control on what to show as related to that particular post. I am not an SEO expert but I believe the manual way is the recommended way to please our friendly neighborhood Google.
Here is the final look of it once completed.
So, let’s jump into it
First: Create the custom field using ACF
We will first create the custom field required that helps us get the data we need which is the Relationship Field Type. Please follow the below image to set this up properly. Ensure that you do assign the field to your “Post” post type as shown below. If you’d like the easy way, then you can download the file and import the file to ACF using the following link (Download Link).
Second: Create a new file called single.php
Now we need to output the data into our site. Create a file called single.php under your child theme folder and add the following code to it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php add_action( 'genesis_before_comments', 'io_related_posts' ); function io_related_posts() { $relatedPosts = get_field( 'related_posts' ); if( $relatedPosts ): echo '<div class="related-posts-container">'; echo '<h3>Related Posts</h3>'; echo '<ul class="related-posts">'; foreach( $relatedPosts as $relatedPost ): // variable must NOT be called $post (IMPORTANT) echo '<li>'; echo '<a href="' . get_permalink( $relatedPost->ID ) . '">' . get_the_post_thumbnail( $relatedPost->ID ) .'<h5>' . get_the_title( $relatedPost->ID ) . '</h5></a>'; echo wp_trim_words( get_the_content( $relatedPost->ID ), 20, null ); echo '</li>'; endforeach; echo '</ul>'; echo '</div>'; endif; } genesis(); |
Third: Style it up
Add the following code to your style.css file under your child theme folder. Line 29 of the below code handles the mobile view, so if you want to handle your mobile view earlier than the 450px breakpoint then this is the line that you need to change.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.related-posts-container { background-color: #fff; font-size: 18px; font-size: 1.8rem; margin-bottom: 40px; padding: 60px; } .related-posts-container h3 { margin-bottom: 5%; } .related-posts { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .related-posts li { -ms-flex-preferred-size: 32%; flex-basis: 32%; } @media only screen and (max-width: 450px) { .related-posts li { -ms-flex-preferred-size: 100%; flex-basis: 100%; margin-bottom: 10%; } } |
Fourth: Start adding your related posts
All that you have to do now is to edit your articles and start adding those related posts.
You can see from the below image that you have full control over what to show. We have placed a limit of 3 posts, so you will not be able to add more than three posts. You can search the posts as well as use the filter on the right-hand side using taxonomies.
That’s all there is to it.
If you found this article helpful then please feel free to share it and as I usual I will be more than happy to help if you require any support. So feel free to leave your comment below.
Great tutorial and very useful, I love ACF!
Hi Maira,
Thank you for the note. Glad that you liked it.
I can’t really build anything without ACF those days.
Thank You for the tutorial. I’m new to WordPress and AFC Pro. I followed your instructions and everything worked perfectly in the backend of WP, but couldn’t get anything to display on the front end. I’m sure I’m missing a step somewhere.
Thanks
Kev
Hi Kevin,
There are only four steps in here. There isn’t much to it. You could probably try to dump your code in single.php file to test and see what exactly is missing.
Try adding
var_dump($relatedPosts);
right before
if( $relatedPosts ):
This will give you an idea if you are pulling any information from the database. Otherwise, you are not, and you will need to follow step 4 to ensure that you are assigning related posts.
Thanks, a very elegant way to do it. I’ll give it a try, now I’m using a couple of plugins to achieve a worse aproach than yours.
Hi Roberto,
Thank you for stopping by. Glad that I can be of help to you.
Hey Omar,
nice tutorial thank you for this! But I found a little issue in the following line:
“echo wp_trim_words( get_the_content( $relatedPost->ID ), 20, null );”
The get_the_content() function doesn’t handle post IDs. Try the get_post_field() function instead:
“echo wp_trim_words( get_post_field( ‘post_content’, $relatedPost->ID ), 20, null );”
Cheers
Norman
Hi Norman,
Thank you for dropping by. I haven’t tested your code above however the code I have provided does work. I am not sure where did you have the issue.
Omar
I am not a coder. Third-party plugins slow down the WordPress website. Thanks for your easy tutorial. Can you write an article, that how to add thumbnails in related posts without a plugin. It’ll help a lot.
Hi Chandan,
I am not sure how you came up with the conclusion of plugins slowing down your site. I do not believe that there is a single installation of WordPress that does not use plugins. I personally use multiple plugins on every single website I work on and have not had any complaints so far.