If you’re looking for a way to dynamically display related posts at the end of your articles in WordPress, WP Grid Builder provides a powerful and flexible solution. While WP Grid Builder does not offer a built-in “related posts” feature, you can achieve this functionality by leveraging custom PHP code provided by WP Grid Builder.
In this tutorial, I’ll walk you through:
- Adding a custom PHP snippet to display related posts.
- Filtering posts by tags or categories.
- Integrating the related posts grid into your post template.
- (Bonus) A method to make related posts randomized instead of showing the most recent ones that is not covered in the WPGB documentation.
Step 1: Add the Custom Code to Your Functions.php File
The first step is to insert a custom PHP function that dynamically loads a WP Grid Builder grid based on post relationships. Make sure you are using a child theme to avoid losing changes when updating your theme.
- Go to WordPress Admin → Appearance → Theme File Editor.
- Find
functions.php
in the right-hand list. - Paste the following code at the bottom of the file (replace the placeholders with your actual settings):
function grid_query_related_posts( $query_args, $grid_id ) {
global $post;
// If it does not match grid id 1.
if ( 1 !== $grid_id ) {
return $query_args;
}
$taxonomy = 'category'; // You have to change "category" to the associated taxonomy.
$post_id = wp_doing_ajax() ? url_to_postid( wp_get_referer() ) : $post->ID;
$terms = get_the_terms( $post_id, $taxonomy );
if ( is_wp_error( $terms ) || empty( $terms ) ) {
$query_args['post__in'] = [ 0 ];
} else {
$query_args['post__not_in'] = [ $post_id ];
$query_args['tax_query'] = [
[
'taxonomy' => $taxonomy,
'terms' => wp_list_pluck( $terms, 'term_id' ),
],
];
}
return $query_args;
}
add_filter( 'wp_grid_builder/grid/query_args', 'grid_query_related_posts', 10, 2 );
How to Customize This Code
- Replace the GRID ID with your WP Grid Builder Grid ID (explained in the next section).
- Change the taxonomy if desired. Leave it as category for showing related content by category, or change it to post_tag to show related posts by tag.
Step 2: Create a Grid in WP Grid Builder
Now that we’ve prepared the PHP snippet, let’s set up our WP Grid Builder grid.
1. Create a New Grid (or use an existing one)
- Navigate to WP Grid Builder → Grids.
- Click Add New Grid.
- Name the grid “Related Posts Grid”.
- Set Posts Per Page → Choose how many related posts you want to display (e.g., 3).
- Post Type → Select Posts.
- Published Posts Only → Ensure the grid only displays published posts.
- No need to set any filtering for tags or categories. Our PHP code will do that already.
2. Copy the Grid ID
💡 Important: When copying WP Grid Builder’s Grid ID, you can find it in the breadcrumbs at the top-left of the grid editor. This is the number you need to replace in the PHP snippet from Step 1.
Step 3: Inserting the Related Posts Grid into Posts
Depending on your site setup, you have multiple ways to insert the related posts grid.
Option 1: Using Astra’s Site Builder (Recommended)
If you’re using Astra, the easiest way is to use Astra’s Custom Layouts to insert the related posts section after every post.
- Go to WordPress Admin → Appearance → Astra → Site Builder.
- Click Add New Layout and Select Footer and name it “Post Footer”.
- Insert a WP Grid Builder Block:
- Click Add Block.
- Select Grid
- Choose your Related Posts Grid.
- Add a Heading Above the Grid:
- Example:
"Related Posts You May Like"
.
- Example:
- Set Display Conditions for the Site Builder Custom Layout:
- Click Astra Settings (Top-right corner).
- Set Display Conditions → Show on All Blog Posts.
💡 Important: We selected a FOOTER because this ensures the related posts section automatically appears at the bottom of every post. If you choose another layout type, you may have to select a location within the content.
Option 2: Using a Shortcode in Your Post Template
IYou can manually insert the grid using a shortcode wherever your theme supports making edits to the bottom of post templates.
- Copy Your Grid Shortcode:
- Go to WP Grid Builder → Grids.
- Find your Related Posts Grid.
- Copy the shortcode (e.g.,
[wp_grid_builder id="18"]
).
- Paste it into Your Theme Template:
- Find the section in your template where you want related posts to appear and insert the shortcode.
This method works for themes like Thrive Theme Builder, Elementor, Divi, etc.
Bonus: Making Related Posts Random Instead of Recent
By default, WP Grid Builder shows the most recent posts that match the filter. If you want random related posts each time a user visits, you need to modify the grid’s query args.
📌 Custom Code to Randomize Related Posts
$query_args['orderby'] = 'rand'; // Randomize the results
💡 How This Works:
- Instead of sorting posts by most recent, this modification will randomly shuffle related posts each time the page loads.
- This prevents the same related posts from appearing in a static order.
Here’s the complete code with the included randomization code:
// WP Grid Builder Related Posts
function grid_query_related_posts( $query_args, $grid_id ) {
global $post;
// If it does not match grid id 1.
if ( 18 !== $grid_id ) {
return $query_args;
}
$taxonomy = 'post_tag'; // You have to change "category" to the associated taxonomy.
$post_id = wp_doing_ajax() ? url_to_postid( wp_get_referer() ) : $post->ID;
$terms = get_the_terms( $post_id, $taxonomy );
if ( is_wp_error( $terms ) || empty( $terms ) ) {
$query_args['post__in'] = [ 0 ];
} else {
$query_args['post__not_in'] = [ $post_id ];
$query_args['tax_query'] = [
[
'taxonomy' => $taxonomy,
'terms' => wp_list_pluck( $terms, 'term_id' ),
],
];
$query_args['orderby'] = 'rand'; // Randomize the results
}
return $query_args;
}
add_filter( 'wp_grid_builder/grid/query_args', 'grid_query_related_posts', 10, 2 );
// END WPGRIDBUILDER
Conclusion
By using WP Grid Builder along with a custom PHP function, you can seamlessly integrate related posts into your WordPress site.
✅ Benefits of This Setup:
- 🎯 Automates related post display without extra plugins.
- 🔄 Supports multiple filtering methods (tags, categories, etc.).
- 🚀 Works with just about everything.