How to Use WP Grid Builder to Filter GenerateBlocks Query Loop

,
YouTube video

Written By

Jonathan Jernigan

Found at Permaslug and APEX Web Solutions

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: https://permaslug.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://permaslug.com/generate-made-easy/

Signup for the most inconsistent newsletter this side of the Mississippi

Delivered on a regular-as-I-can basis, I summarize the goings on here on Permaslug, share announcements, and other pertinent information. I hate garbage emails as much as you and promise not to contribute anymore to it.

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