How to Use WPGB Facets with Bricks Components

How To
1

Currently, WPGB’s custom “Facet” element can not detect loops that are inside components.

Already fixed this one, so I’m just posting for other people.

Below is a copy-paste of my Obsidian notes.

This documents the working pattern based on:

  • WPGB custom query guide
  • Bricks component loop architecture
  • Manual grid binding

Goal

Filter a Bricks loop that lives inside a Component using WP Grid Builder facets.

Native integration fails because:

  • WPGB cannot detect component-scoped loops
  • No grid instance is registered automatically

Solution: use WPGB Custom Query binding.

Overview

  • Bricks query loop (li)
  • Loop wrapper (ul) class = WPGB identifier
  • Facet shortcode targets same identifier

Prerequisites

  • Bricks Builder installed.
  • WP Grid Builder plugin installed and facets created.
  • WP Grid Builder - Bricks Add-on installed.
    • OR Filter Custom Content option turned on in WP Grid Builder settings.

Setup Guide

1. Create a Bricks Query Loop

Query

  • Name = <my_query_name>
  • Category = <my_query_category>
  • Description = <my_query_description>
  • Type = <my_query_type>
  • Query editor (PHP) = true:
return [
    'post_type'       => 'cars',
    'posts_per_page'  => -1,
    'post_status'     => 'publish',
    'wp_grid_builder' => 'wpgb-content-<my_identifier>',
];

The wp_grid_builder identifier must be per grid.

The wpgb-content- prefix is mandatory. After the -, you can type anything you want. You will have to use a CSS class with the exact same name on your loop wrapper.

Example: 'wp_grid_builder' => 'wpgb-content-cars'.

2. Add Grid Wrapper Class

On the ul that wraps the li you’ve looped above, add a CSS class with the exact same name as wpgb-content-<my_identifier>.

Example: class="wpgb-content-cars".

3. Add Facets

Add your facets using a shortcode.

Example:

[wpgb_facet id="28" grid="wpgb-content-cars"]

[wpgb_facet id="27" grid="wpgb-content-cars"]

The grid argument must match the unique grid identifier you’ve set in steps 1 and 2.

Example:

  • wpgb-content-cars query wp_grid_builder argument
  • wpgb-content-cars loop wrapper class attribute
  • wpgb-content-cars shortcode grid argument

4. Re-index (optional)

After wiring everything, go to WP Grid Builder Facets page, click the three dots next to your facet, then click Re-index.

Optionally, you can also hard reload the frontend. In Google Chrome, you can do this by pressing the keyboard shortcut CTRL + SHIFT + R, or by right-clicking the page, selecting Inspect, right-clicking the Reload this page icon in the top-left corner, then selecting Hard Reload or Empty Cache and Hard Reload.

Checklist

  • Query loop (li) arguments contain 'wp_grid_builder' => 'wpgb-content-<my_identifier>'.
  • Loop wrapper (the ul that wraps your li) has a wpgb-content-<my_identifier> CSS class.
  • The facet shortcode contains the grid="wpgb-content-<my_identifier>" argument.

Recommendation

Now that Bricks supports saving query templates as Global Queries, it’s recommended that you save it as a Global Query for reuse.

Now that Bricks has components, it’s recommended that you save the entire section or block as a component.

Example:

  • component.mac-cars-section-alpha
    • container.mac-cars-section-alpha__facet-group
      • shortcode.mac-cars-section-alpha__facet (grid="wpgb-content-<my_identifier>")
    • component.mac-car-list-alpha (`class=“wpgb-content-<my_identifier>”)
      • component.mac-car-card-alpha (query has argument 'wp_grid_builder' => 'wpgb-content-<my_identifier>')

Resources Used

1 Like
2

What are you accomplishing with WPGB that you aren’t able to accomplish standard loops and search/filter? Genuinely curious and I know there are limitations with the built in component.

-Ron

3

Well, here’s an example above lol.

We’ve been using WPGB for a very long time. Back then, Bricks filters just weren’t a thing, so we had to. Now, we’re still using it for consistency, plus it has a lot more facet types, conditional logic, etc.

It’s pretty much for the same reason we’re using WS Form instead of the built-in Bricks forms - it’s a dedicated solution that’s proven to be rock solid and every single hour of dev time goes into improving this specific feature set, which can’t be said about the Bricks facets. They’re an afterthought.

1 Like