Custom Related Posts After Entry Footer in Genesis
10

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

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

Before starting, 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 besides, you also got some related articles, which are Genesis tutorials in associated 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.

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

It is another article of the RainaStudio Map 101. You can check out previous posts of this series are below.

Add Custom Related Posts Section in Genesis Framework

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

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

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

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

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

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

And again, I open the PHP tag to write functions and variables. The 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 the post loop. And the following code is for layouting custom associated 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. The 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 what 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 difficult ways out there doing the 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 a few hours.

Editorial Staff
 

Editorial Staff is an in-house team of native WordPress developer and industry columnists.

  • 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?

  • >