WordPress Related Posts Without A Plugin

Showing WordPress related posts by categories are 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!

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 code – and we are going to show you how!

WordPress Related Posts are a great way to show visitors additional content that you may have on your website that is related to a post they are reading.

For example if you are a food blogger and you have a post about “Honey Baked Chicken” – you can then 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 it 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!

Now you can do that – and with this tutorial we will show you how!

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

1. 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.)
2. Make sure you have access to your single.php file to add some code
3. 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
2. Add 2 custom fields to your 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 A 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.

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.

If you already have a single.php file with code in it then skip to the next code section.

<?php
/**
 * Child theme single post template.
 */
 
add_filter( 'body_class', 'single_posts_body_class' );
function single_posts_body_class( $classes ) {
   $classes[] = 'custom-single';
   return $classes;
}

add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' );
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );

add_action( 'genesis_entry_content', 'related', 20 );


function 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;
}
genesis();

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}
.entry-content 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) {
  .entry-content 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!