How to Add Related Posts Using WP Grid Builder

Doug

Tech Stack Integrator

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.

  1. Go to WordPress Admin → Appearance → Theme File Editor.
  2. Find functions.php in the right-hand list.
  3. 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)

  1. Navigate to WP Grid Builder → Grids.
  2. Click Add New Grid.
  3. Name the grid “Related Posts Grid”.
  4. Set Posts Per Page → Choose how many related posts you want to display (e.g., 3).
  5. Post Type → Select Posts.
  6. Published Posts Only → Ensure the grid only displays published posts.
  7. 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.

    1. Go to WordPress Admin → Appearance → Astra → Site Builder.
    2. Click Add New Layout and Select Footer and name it “Post Footer”.
    3. Insert a WP Grid Builder Block:
      • Click Add Block.
      • Select Grid
      • Choose your Related Posts Grid.
    4. Add a Heading Above the Grid:
      • Example: "Related Posts You May Like".
    5. Set Display Conditions for the Site Builder Custom Layout:
      • Click Astra Settings (Top-right corner).
      • Set Display ConditionsShow 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.

    1. 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"]).
    2. 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.