Now Updated for GenerateBlocks 2.0
As of February 2025, this tutorial is up to date with the overhauled GenerateBlocks 2.0 Query block.
Scroll to the bottom for the code for GB1.7 and earlier.
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 2.0 Query 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 top level Query element 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
- If using a shortcode, note its shortcode. Change the grid= in the shortcode to wpgb-content-1
- If using the Facet block, add the block and simply type in wpgb-content-1 and hit return on the “select a grid to be filtered” field
- Ensure the facet block or shortcode are present on the same page as the Query block
- Add and enable the code snippet below:
Code Snippet:
add_filter( 'generateblocks_query_wp_query_args', function( $query_args, $attributes, $block, $current ) {
if ( ! is_admin()
&& ! empty( $attributes['globalClasses'] )
&& is_array( $attributes['globalClasses'] )
&& in_array( 'wpgb-query', $attributes['globalClasses'] )
) {
$query_args['wp_grid_builder'] = 'wpgb-content-1';
}
return $query_args;
}, 10, 4 );
The steps for GenerateBlocks 1.7 and earlier are as follows:
- 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: https://jonathanjernigan.com/go/wpgb
Code was sourced from GenerateBlocks forums here: https://generatepress.com/forums/topic/how-to-set-up-a-custom-parameter/#post-2302691
Learn about my Generate Made Easy course: https://jonathanjernigan.com/generate-made-easy/