How to Add Related Posts to Your Blog Posts in GenerateBlocks Pro

If you’ve ever wondered how to add a related posts section to your blog, today I’m going to show you exactly how to set this up using GenerateBlocks Pro. Adding a related posts section is a great way to engage your readers and keep them on your website longer by suggesting more content they might be interested in.

Step 1: Set Up a New Element

To start, navigate to Appearance > Elements in your WordPress dashboard. We’ll be adding a new element using GenerateBlocks Pro.

1. Click Add New Element and choose Block Element. Hit Create.
2. Title your element something like Related Posts Loop.

Step 2: Design the Related Posts Section

Now that you’ve created your element, it’s time to design your related posts section.

1. Add a Container block and set your padding. For example, you might use 80px for the top and 20px for the sides.
2. Set the background color to match your blog’s design. For instance, you might use the same background blue as your blog’s hero section.
3. Add a Headline block and title it something like Continue Reading. Set the text color to white.
4. Insert a Query Loop block. Choose a default layout that includes a featured image, such as the two-column, four-post option.
5. Adjust the query loop to show only three posts and set the grid item width to 33% to display all three posts in a single row.

Step 3: Customize the Query Loop Design

To match the design of your site, you can customize the query loop further:

1. Post Template Container: Remove the background color and add a 3px white border on the top and bottom.
2. Padding: Zero out the padding on the post template container, then set 20px for the top and bottom.
3. Featured Image: Set the image height to 250px and use Object Fit: Cover to ensure the images are uniform.
4. Title: Change the title to an H3, set the color to white, and add a hover effect that changes the text to a slight gray.
5. Date: Move the date above the title, set the color to white, and adjust the margins as needed.
6. Excerpt: Limit the excerpt length to about 40 characters, set the text color to white, and remove the “Read More” link if you prefer.
7. Button: Add a Read Article button, style it as a white button with a dark gray hover effect, and adjust the spacing and font size to fit your design.
8. Equal Height Cards: Ensure the cards are the same height by setting the post template to 100% height. Use flexbox to align the button at the bottom.

Step 4: Set Up Query Parameters

Now that your design is in place, it’s time to set up the query parameters to pull in related posts.

1. In the Query Loop block settings, add a Parameter.
2. Choose Taxonomy and then select Categories.
3. Set the option to Current Post Terms to ensure that only posts from the same category are shown.
4. Add another parameter to Exclude Current Post, so the post being viewed isn’t displayed in the related posts section.

Step 5: Choose Where to Display the Related Posts

1. In the Element Settings, under Hook Name, select After Main Content. This will display the related posts section after your blog post content.
2. Under Location, choose All Posts to ensure the related posts section appears on every blog post.

Step 6: Test and Publish

Save your draft and then publish the element. Visit a blog post on your site and scroll to the bottom to see the related posts section in action. If everything looks good, you’re all set!

Bonus: Additional Query Parameters

You can also filter related posts by the same author, tags, or a date range. For example, to show posts by the same author, add an Author parameter and select Current Post Author.

That’s it! You’ve successfully added a related posts section to your blog using GenerateBlocks Pro. This feature can be a powerful way to keep readers engaged with your content. Explore the various query parameters to customize the related posts section to suit your site’s needs.