Skip to main content

How to Use WPGB Facets with Bricks Components

PropertyValue
descriptionHow to Use WPGB Facets with Bricks Components
tagskb, bricks, wpgb
rating

Filtering a Custom Query (Loop inside Component)​

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>")
    • container.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​