Creating a manual list of related posts in WordPress

03 May, 2014 by Tom Elliott

This tutorial walks through the straightforward steps involved in creating your own manually curated list of related posts in WordPress. Once we have finished, related post links will be easily selectable on post pages as shown below.
Related posts lists using ACF

This method doesn’t involve the use of a specific ‘related posts’ plugin, as this is a relatively easy task but it does use the awesome Advanced Custom Fields (ACF) tool. The free ACF plugin is great for all kinds of field management tasks and is perfect for helping us setup related post functionality.

Having a list of related posts in your blog articles or other pages is advantages because:

  • You’re providing a hand curated list of relevant articles that you think your visitors will find useful. This is much better than automatically displaying posts from the same category or tag
  • Related posts can help reduce the bounce rate and the time your visitors spend on your site if they are drawn in to read more content
  • If you have AdSense, this could help increase page views and therefore earnings
  • Good for SEO – the authority your posts acquire in search engines can partially contribute to the authority and relevance of the related posts they are linked to.

In this tutorial, we will first setup a related ‘Relationship’ field using ACF, then assign the related post(s) in an article and finally update the single.php with a few lines of code.

Step 1 – Setup ACF and related posts field

  1. Install the ‘Advanced Custom Fields’ plugin if not already setup then select ‘Custom Fields’ from the main sidebar menu
  2. Select ‘Add new’ next to the ‘Field Groups’ heading
  3. Name the field group something meaningful and fill out the details as below. ‘Field Name’ should be ‘related_posts’ and you need to select ‘Relationship’ as the ‘Field Type’
    Setting up related post field in ACF

  4. Under Location rules, make sure ‘post type is equal to post’ is selected. Or you can change this to any other post types, templates or individual pages where you want the this field to appear
  5. Click publish in the top right

Step 2 – Assign some related posts

Head back over to one of your posts that you want to assign some related articles to. You should see the below field object which will let you select one or more related posts.

Related posts lists using ACF

A list of related posts using ACF ‘Relationship’ field type

Just use the + and – buttons to select and move posts to the right hand side. You can also drag and drop these posts to change the order that they will appear in. The handy search is based on post title.

If you selected ‘Featured image’ in the ‘Elements’ option in the previous step, you’ll also see the post’s featured image thumbnail next to each post.

Update your post once your happy with the related post selection.

Step 3 – Update single.php

Finally we need to drop the below PHP code into the theme’s single.php file, where you want the related posts to appear. It usually makes sense to include this after the end of the article and before the comments.

<?php  
$posts = get_field('related_posts'); 
if ($posts) { ?>
    <h3 class="related">Related posts</h3>
    <p>
    <?php foreach($posts as $post) { setup_postdata($post); ?>
        <a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?> &raquo;</a><br/>
    <?php } //End for each loop
    wp_reset_postdata(); //Restores WP post data ?>
    </p>
    <hr />
<?php } //End if ?>

This code (a variation of the code provided on the ACF Relationship page) basically loops through each post (if content in the related post field exists) and grabs the post data, outputting the title and link under a ‘related posts’ heading.



Get posts for custom taxonomies & terms in WordPress »
Improve a WordPress website Page Speed by 50% in 5 minutes »
Checking if next post exists in WordPress »


10 Comments

  • Richard says:

    Perfect.. this is just what I was looking for.. much better than any of the related post plugins available

  • Great job Tom !
    I would like to put it within the loop but the permalink gets the current page url :/… Any idea ?

  • Zach says:

    Any idea how you do a next -> prev-> button with the selected posts? That way the could select it through a side nav or read the next post in order…

  • inbou says:

    Does this also add pagination if you have more posts defined per page?

  • sharad gupta says:

    Really a perfect solution to add customize related posts.
    In fact many times I need it on my blog …

  • navin kumar says:

    Hello ELLIOTT!

    I have added custom field related posts accordingly and this is working great, but when I try to share a post by share button then it fetches the first related post instead of the post I am sharing.

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    css.php