Custom Related Posts After Entry Footer in Genesis
10

Custom Related Posts After Entry Footer in Genesis (RainaStudio Map 101)

Are you building website using WordPress and Genesis Framework? Yes! That’s great, here on this post today you gonna learn how you add a custom related posts section after entry footer in Genesis.

Before starting out, we should know what the related posts are needed for. Well, suppose, you have landed on this post Googling “custom related posts without a plugin“. You already got what you needed in this post and in addition, you also got some related articles which are Genesis tutorials in related posts section. You intended to read and went through them. What does that mean? That means you are not bouncing away from my site within moments.

This is good news for us and it reduces bounce rate. So, the most important benefit of related posts section is bounce rate reducing. 🙂

This is one of the sub-posts of RainaStudio Map 101. You can check out previous posts of this series are following below.

Add Custom Related Posts Section in Genesis Framework

First thing you’ll be needed to do is making sure you have Genesis Framework active with a child theme. Here is the demo screenshot of what we are going to achieve.

Custom Related Posts in Genesis

Include the below code to your child theme’s functions.php file. Adding the following code we register a custom image size for related posts thumbnail.

This gonna very exciting now. We add the below code to functions.php file also. This code going to pull related posts based on current post’s taxonomies, and category.

https://gist.github.com/anwerashif/2d8a2644ea596960d9a82e90628297be

Read code before putting into your theme files. Because it’s important to understand what it is doing. I have added comment side of code to understand easily. Let’s check what they are doing.

At the first step, I included the conditional tag. Using this tag I mean to execute all code only on the single post page.

Underneath of it, I close the PHP tag to do some HTML.

And again I open the PHP tag to write functions and variables. global $post; is the WordPress specific global variable and we are using this so that we can access $post throughout the code. Next, we write a variable called $args and put all arguments in the array of wp_parse_args for merging.

Next, we check taxonomy and the current post taxonomies for related posts. Then we set queries for post loop. And the following code is for layouting custom related posts.

Do you remember we globalize $post variable? We reset our post data using wp_reset_postdata(); and close the main div.

I wanted to hook the function after entry so that it can be visible right after the post content. Following snippet did that for us.

Boom! We have done PHP. Now the time to get hands dirty with CSS. Include the following CSS in your child theme’s style.css file.

Here, I can finally tell you we have done. 🙂

Conclusion

I hate to use third-party plugins while it comes to build a website from scratch. You can dig around the web to find out alternative ways to make any built-in features for your website. I hope you have enjoyed the tutorial. If you think more advanced ways out there doing same or further let us know. We will include the information in this post.

Leave your feedback and issue using the form below. I will be in touch within few hours.

  • Reza says:

    this really helped me. How do you make related posts like those on this site? please make the guide.

    • Anwer Ashif says:

      This guide is exactly what I did for our blog. Is there any problem/issue you facing?

      • Reza says:

        work well. it’s just that the article title is below the picture. how can the title be on the side and the image size is exactly the same as the one on this blog?

        • Anwer Ashif says:

          Can you share the URL? OR try this CSS:

          .related-posts-wrap .thumb {
          margin: 0 8px 10px 0;
          max-width: 160px;
          float: left;
          border: 1px solid #dfdfdf;
          }
          .related-posts-wrap .title {
          line-height: 18px;
          font-size: 14px;
          padding: 3px 0 0;
          }

  • Abhishek Kumar says:

    Hi, dear

    Thanks for a great tutorial, I am bit worried, when I refresh my site, it automatically changes the related post. Why does this happen with me?

    Would love to know your response asap.
    Thanks & Regards
    Abhishek

    • Anwer Ashif says:

      Hey Abhishek,

      The snippet will automatically pull RANDOM posts from the same terms(categories, tags).

      You are able to make changes by altering value, where is, ‘orderby’ => ‘rand’, // Randomize the results

      Thank You

  • Susanta Kumar Sahoo says:

    How do customize the snippet to show posts published only within the last 30 days?

    Thanks!

  • Michael says:

    How would I display related posts only by tags and not categories?

  • >