This add-on lets you add facets to your Bricks Builder “Posts”, “Query Loop“, and archive listings.

Supported elements

The following Bricks elements are supported:

Usage: “Posts” element

  1. Bricks - add a Posts element to your page
    Add a Posts element to your page.

    Within Bricks, add a new “Posts” element to your page.

  2. Bricks - toggle the Use FacetWP checkbox
    Toggle the Use FacetWP checkbox.

    In the element settings, toggle the Use FacetWP checkbox.

  3. Bricks - paste facet shortcodes into a Shortcode element
    Paste facet shortcodes into a Shortcode element.

    After creating some facets, paste their shortcode(s) into a Shortcode element.

Usage: “Query Loop” feature

  1. Within Bricks, create a new Div element. This will be the wrapper element that FacetWP needs to auto-detect the listing.
  2. Next, add a Container, Block, or Div element (this will be our Query Loop).
  3. Bricks - toggle the Use query loop and Use FacetWP checkboxes
    Toggle the Use query loop and Use FacetWP checkboxes.

    Within this element, toggle the Use query loop checkbox, then toggle the Use FacetWP checkbox after it appears. Adjust the Query as needed by clicking the “∞” icon.

  4. Bricks - add a Heading element
    Add a Heading element to your page.

    To add some example dynamic data, add a new Heading element and set its content to {post_title}.

  5. Bricks - nest the elements in the Structure area
    Nest the elements in the Structure area.

    Finally, in the Structure area (right sidebar), nest the elements so that it looks like Div > Query Loop > Heading.

    Note: “Query Loop” is the element from step 2.

Query Loop – setup video

Usage: “Products” element

Bricks - add a Products element to your page
Add a Products element to your page.

If you are using Bricks with WooCommerce, it’s also possible to use Bricks’ “Products” element, by setting the "facetwp" => true query argument with Bricks’ own “bricks/posts/query_vars” filter.

Bricks - find your Products element's ID
Find the Products element’s ID.

This filter can also be used to customize other query arguments. It works for Posts, Products, and Query Loop elements.

Add the following code to your Bricks child theme’s functions.php, and change the value of $element_id to your “Products” element’s unique ID.

This element ID consists of a string of random characters that can be found in the field above the element’s settings, where it is preceded with #brxe-.

How to use custom PHP code?

PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info

add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) { if ( $element_id === 'yjqekk' ) { // change value to your Products element's unique element ID $query_vars['facetwp'] = true; } return $query_vars; }, 10, 3 );

Changelog

0.4 (Sept 15, 2022)

  • New support Bricks archive templates
  • New support Bricks pages set as "Posts page" (Settings > Reading)
  • Improved moved "Using FacetWP" setting directly above the "Query" setting
  • Improved only show "Using FacetWP" setting when the "Query loop" setting is enabled
  • Improved support for Media-based query loops, incl. lightbox + PhotoSwipe

0.2 (Sept 12, 2022)

  • New support "Query Loop" elements (Container, Block, Div)
  • Improved better handling of "Posts" elements

0.1 (Sept 8, 2022)

  • Initial release

See also