• Skip to primary navigation
  • Skip to main content

alansari.io

by OMAR AL-ANSARI

  • Home
  • About
  • Portfolio
  • Blog
  • Code
  • Contact

Create Related Posts in Genesis using ACF

January 11, 2017 by Omar Al-Ansari 10 Comments

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.

Related Posts in Genesis using ACF

I have used freshly installed Genesis Sample child theme. However, this should work just fine in any Genesis child theme.

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

Setup Related Posts Custom Fields

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.

single.php
PHP
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.

style.css
CSS
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.

Related Posts Backend - ACF

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.

Sources:
  • Advanced Custom Fields
  • How WordPress Related Posts Plugin Can Hurt Your SEO

Filed Under: Code Snippets Tagged With: ACF, Genesis, tutorial

Reader Interactions

Comments

  1. Maira says

    January 16, 2017 at 2:53 AM

    Great tutorial and very useful, I love ACF!

    Reply
    • Omar Al-Ansari says

      January 21, 2017 at 1:14 PM

      Hi Maira,

      Thank you for the note. Glad that you liked it.

      I can’t really build anything without ACF those days.

      Reply
  2. KEVIN says

    February 12, 2017 at 8:51 AM

    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

    Reply
    • Omar Al-Ansari says

      February 12, 2017 at 7:54 PM

      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.

      Reply
  3. Roberto says

    March 2, 2017 at 3:47 PM

    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.

    Reply
    • Omar Al-Ansari says

      March 2, 2017 at 6:48 PM

      Hi Roberto,

      Thank you for stopping by. Glad that I can be of help to you.

      Reply
  4. Norman Höhne says

    April 22, 2017 at 6:53 PM

    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

    Reply
    • Omar Al-Ansari says

      April 24, 2017 at 7:02 PM

      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

      Reply
  5. Chandan Prasad Sahoo says

    March 29, 2018 at 7:09 AM

    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.

    Reply
    • Omar Al-Ansari says

      March 30, 2018 at 9:48 AM

      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.

      Reply

Leave a Reply Cancel reply

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

  • Twitter
  • Facebook
  • YouTube
  • GitHub

Copyrights © 2016–2021 · alansari.io · Proudly powered by WordPress and Genesis Framework