Creating a manual list of related posts in WordPress

03 May, 2014 by Tom Elliott


Warning: Undefined array key "width" in /var/www/vhosts/tomelliott.com/httpdocs/wp-includes/media.php on line 1612

Warning: Undefined array key "height" in /var/www/vhosts/tomelliott.com/httpdocs/wp-includes/media.php on line 1613

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:

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 »


13 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.

  • Ashkar says:

    Hey Thanks for this tips, But I can’t see filter search option in my plugin, so that I only getting a dropdown menu instead of post search option. Any idea?

  • Jonh says:

    How the show with respective category?

  • Scott says:

    Any Idea how i can show the total number of related posts along side the related post heading like this 8 Related Posts?