22nd Jun '22
/
22 comments

Using WP Grid Builder Facets with Bricks’ Query Loop

Using WP Grid Builder Facets with Bricks’ Query Loop

Update: This tutorial was written before WPGB had a Bricks add-on. Now, it is advisable to use that add-on instead. Get it from here.

Updated on 6 Jul 2022

In this tutorial, we’ll go through how we can get WPGridBuilder’s facets to work with Bricks’ query loop feature when using custom queries. For example, for adding different product filters, post search etc to posts that have been custom built with the container element.

WP Grid Builder is a popular WP plugin for adding real-time faceted searches & filters to posts and pages. The results load immediately on the page, so it’s great for filtering products or searching posts without disrupting the user flow by reloading the page.

Adding a container to wrap the post loop

With Bricks, when enabling the query loop feature on a container element, the container itself is repeated multiple times based on the query. These are the posts that will be changed by the facets.

We first need wrap these inside of a new container and give this post container a unique class. The requirement is that this class needs to start with wpgb-content.

For our post grid, let’s give it the class wpgb-content-post-grid-1.

Setting up the Facets

Inside WPGridBuilder’s setting page, once we have chosen the facets we wish to use, it will give us the shortcodes that we can insert on the page. We need to copy these, but change them slightly.

In Bricks, using the shortcode element, add in the shortcodes. For each shortcode change the grid parameter to match the class that we gave our new container. So in this case, the grid parameter would need to be wpgb-content-post-grid-1.

The shortcode will look something like this..

[wpgb_facet id="1" grid="wpgb-content-post-grid-1"]

Note that the facet shortcodes won’t render inside of the builder.

Making sure WPGB picks up the custom query

By default, WPGridBuilder won’t automatically pick up the custom query and so the facets won’t do anything. What we need to do is add a new query argument to make sure it works. The argument is wp_grid_builder and we need to set it to match the class of our container, which again is wpgb-content-post-grid-1.

The easiest way, which can all be done all inside of Bricks, is to add a new shortcode just before our container, this time the wpgb_query shortcode, making sure we give it the ID that matches our container class.

[wpgb_query id="wpgb-content-post-grid-1"]

Enable Filter Custom Content

The last step is to go back into WPGridBuilder’s settings and enable the setting “Filter custom content”. This will ensure that WPGB knows to look out for the custom query and will correctly filter it.

That’s it

Now on the front end, the facets will appear where the shortcodes were placed and will filter the posts inside our container.

When filtering users

We need to use the bricks/users/query_vars filter in Bricks to add wp_grid_builder parameter to the users query.

Add this in child theme’s functions.php or using a code snippets plugin (on the front end):

add_filter( 'bricks/users/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( 'mjkama' === $element_id ) {
		$query_vars['wp_grid_builder'] = 'wpgb-content-user-grid-1';
	}
	
	return $query_vars;
}, 10, 3 );

Replace mjkama with the Bricks element ID of the element on which Query Loop is applied.

Replace wpgb-content-user-grid-1 with the class added to the Query Loop element’s parent.

There is no need to add the wpgb_query shortcode.

When filtering terms

We need to use the bricks/terms/query_vars filter in Bricks to add wp_grid_builder parameter to the terms query.

Add this in child theme’s functions.php or using a code snippets plugin (on the front end):

add_filter( 'bricks/terms/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( 'mjkama' === $element_id ) {
		$query_vars['wp_grid_builder'] = 'wpgb-content-term-grid-1';
	}
	
	return $query_vars;
}, 10, 3 );

Replace mjkama with the Bricks element ID of the element on which Query Loop is applied.

Replace wpgb-content-term-grid-1 with the class added to the Query Loop element’s parent.

There is no need to add the wpgb_query shortcode.

References

https://docs.wpgridbuilder.com/resources/guide-filter-custom-queries/

Tagged:
Bricks
Free
Query Loop
WPGridBuilder

David Browne

David is a Front-end WordPress Developer born in the UK, now based in Sydney. He spends his days helping people build things with WordPress by sharing tips, code & creating plugins. Lead developer of BricksExtras.

Get access to all 614 Bricks code tutorials with BricksLabs Pro

22 comments

Leave your comment

 

Related Tutorials..

Pro
Child Posts Section in Bricks

Child Posts Section in Bricks

This Pro tutorial provides the steps to limit the posts (can be of any post type) output by Bricks' query loop to children of the…
Read more →
Categories: Bricks, Pro
Tags: Query Loop
Pro
Current Single Post Reference From Inside a Bricks Query Loop

Current Single Post Reference From Inside a Bricks Query Loop

Use case: Get the single post’s custom field (like ACF Repeater or Meta Box Group) array row corresponding to the loop’s counter/index
Read more →
Categories: Bricks, Pro
Tags: Query Loop
Random Posts in the Same Category as the Current Single CPT Post in Bricks

Random Posts in the Same Category as the Current Single CPT Post in Bricks

Here’s how query loop can be set in Bricks to show related posts by a taxonomy’s terms
Read more →
Categories: Bricks, Free
Tags: Query Loop
Pro
Posts Grouped by Post Dates in Bricks

Posts Grouped by Post Dates in Bricks

Setting up query loops for “Post Dates” with an the inner loop displaying all posts published on that day.
Read more →
Categories: Bricks, Pro
Tags: Nested Queries
Pro
Upcoming Events with ACF Date Sub field Repeaters grouped by Month Years in Bricks

Upcoming Events with ACF Date Sub field Repeaters grouped by Month Years in Bricks

In the comments section of Upcoming Events Accordion in Bricks Grouped by 'Month Year' a member asked: CPT: eventACF Field: event_dates (Repeater) with event_date sub…
Read more →
Categories: Bricks, Pro
Tags: ACF Pro, Nested Queries
Pro
Related Services grouped by Service Categories on Single Branch Posts in Bricks

Related Services grouped by Service Categories on Single Branch Posts in Bricks

How to query ACF relationship fields on single CPT templates.
Read more →
Categories: Bricks, Plugins, Pro
Tags: ACF, Nested Queries
Pro
Posts older than today in Bricks

Posts older than today in Bricks

How to display only posts that were published before today in a query loop.
Read more →
Categories: Bricks, Pro
Tags: date_query
Pro
CMB2 Repeatable Group Bricks Query Loop

CMB2 Repeatable Group Bricks Query Loop

This Pro tutorial provides the steps to create a custom query loop type for outputting the subfield values of a Group field (repeatable) when using…
Read more →
Categories: Bricks, Plugins, Pro
Tags: CMB2, Custom Query Type
Pro
ACF User Field Bricks PHP Query

ACF User Field Bricks PHP Query

In the Bricks Facebook group a user asks: my end goal was to create a set of cards that would display the Users that are…
Read more →
Categories: Bricks, Plugins, Pro
Tags: ACF, Users Query