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/
22 comments
David Nickson
Hey Sridhar,
I'm trying to build a docs search filter. I'm using Meta Box CPTS for the docs, and then WP Gridbuilder as the facet.
I have made a modal in Bricks with a list of docs CPT's being queried in. I add the Facet and select WP Gridbuilder search but I can't get it to search the post contents in the docs CPT.
How did you build your search filter? And do you know how I can make this work? Cheers!
Sridhar Katakam
Hi David. Hope you saw this note near the top of this tutorial: https://d.pr/i/5lhYqY.
If you are already using that add-on, can you record a Loom/screencast walking through your setup so I can get a better idea of what you are trying to do?
Michael
Would like to know how to filter (radio) by year. I.e 2023, 2022, 2021. Might be a custom facet: https://docs.wpgridbuilder.com/resources/filter-facets/
Sridhar Katakam
https://brickslabs.mystagingwebsite.com/published-years-filters-in-bricks/.
Alan Gunning
is it possible to have the facets on a home page that can filter onto a results page (eg like a property search with an apply button that redirects to a search results page with loop query (rather than a wpgridbuilder grid).
Alan Gunning
ignore that - was easier that I thought!
Ashley Fox
Hey there Alan! Curious if you wouldn't mind sharing your findings? I'm facing the same task but haven't discovered the trick just yet.
Sridhar Katakam
https://wpdevdesign.com/faceted-drilldown-search-in-wordpress-using-wp-grid-builder/
Domenico Mastroianni
How do you style the facets to match the website design and colours?
David Browne
Currently, manually.
See the discussion here on how you might go about styling. via classes using the root and custom CSS.
https://www.facebook.com/groups/brickscommunity/posts/1235250413806143/?comment_id=1235271543804030
If you're a BricksExtras user, I've since created a WPGB facet styler that should be released this week.
John Anderson
Great article. Works equally well for Oxygen Builder.
Sebastian Albert
Have just tried it with 1.5 beta. On two installs, one Woo-commerce the other a normal page. Sadly something breaks the JS of WPGridBuilder. WPGridBuilder's invite scroll is not working correctly. When a facet is used, it skrews up all dynamic text fields and populate it with some false content. Maybe you could take a look. Thanks
MJ
is this filter/facet plugin working on a posts page / query loop incl. the pagination - I got searchandfilter pro working but not the pagination?! thanks
Francois Gonin
Thank you David, it works very well. It's great. Now I need to do the same with a term query loop and this didn't work doing it this way. Any Idea what could be the problem? (it works when using a wpgb grid)
Sridhar Katakam
Updated the tutorial to answer your question Francois.
Francois Gonin
Hi Sridhar I realisez that using the term query as described does not reflect empty terms settings of the bricks query in the wpgb facet. In the facet I have empty terms listed although not set in the bricks query loop. Any chance to get this set up correctly or is this more kind of a bug of wpgb? Thanks to let me know. François
Christian
Hi. Does this work on the archive pages? I have tried to follow the guode but it does not seem to render when going to a custom post type archive page created via metabox.
David Browne
Hi Christian,
WPGB now has a Bricks addon (free for WPGB users), which will work with custom queries or archive pages.. No need for adding shortcodes etc, you just select the query from the facet element.
https://wpgridbuilder.com/add-ons/bricks/
Sridhar Katakam
What are you trying to filter the terms by? Can you share a screenshot of your facet?
Francois Gonin
thank you very much Sridhar & David, it works. Seems a bit slower than using the wpgb grid, but maybe that's only seeming like this because of the missing animation, hard to say. Is there maybe a (more or less) simple way to add a fade-in (or other) animation for this kind of ajax?
Francois Gonin
oh, I just realised animations are working just with simple css (I thought this won't work).
Patrick
Thank you very much! Tried this a few weeks ago and couldn't get it to work. Actually did it exactly like your instructions. Vll. an update fixed the problem. Thanks a lot!