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/

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

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!

    • A

      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?

  • 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/

  • 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).

  • Domenico Mastroianni

    How do you style the facets to match the website design and colours?

  • 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

  • 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)

    • A

      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.

          • A
            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/

        • A

          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!

Leave a Reply to Francois Gonin (Cancel Reply)