How to Use WP Grid Builder to Filter GenerateBlocks Query Loop


YouTube video

Written By

Jonathan Jernigan

WP Grid Builder has been for some time now my preferred way to add filters to your WordPress site. Filtering posts of any kind by categories or custom taxonomies, adding search fields and more can all be done with WP Grid Builder facets.

In this tutorial, I show you how to get WP Grid Builder working with the GenerateBlocks Query Loop element. Out of the box, it doesn’t quite work due to requiring an additional query argument, but I’ll provide you the code to get it working.

To quickly recap the steps required:

  • Ensure your Query Loop element’s Grid has two classes: wpgb-query and wpgb-content-1
  • In WP Grid Builder settings, ensure “Filter Custom Content” is enabled
  • Create your WP GB Facet and note its shortcode. Change the grid= in the shortcode to wpgb-content-1
  • Add the shortcode on your page with the Query Loop
  • Add and enable the code snippet below:

Code Snippet:

add_filter( 'generateblocks_query_loop_args', function( $query_args, $attributes ) {
		if ( ! is_admin() && ! empty( $attributes['className'] ) && strpos( $attributes['className'], 'wpgb-query' ) !== false ) {
			$query_args['wp_grid_builder'] = 'wpgb-content-1';

		return $query_args;
	}, 10, 2 );

Get WP Grid Builder:

Code was sourced from GenerateBlocks forums here:

Learn about my Generate Made Easy course:

Signup for the most inconsistent newsletter this side of the Mississippi

Delivered on a regular-as-I-can basis, I'll share with you the tl;dr of new blog posts and videos, exciting announcements, and other valuable information from around the WordPress ecosphere. You'll never get more than one email per week from me.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.