Menu

FacetWP – Bricks

Description

Add facets to Bricks post listings

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:

Using a “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.

 

 

 

 

 

  1. Bricks - Toggle the Use FacetWP checkbox
    Toggle the Use FacetWP checkbox.

    In the element settings, toggle the Use FacetWP checkbox.

  2. 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.

Add pagination to a “Posts” element

Bricks - Enable pagination in a Bricks 'Posts' element.
Enable pagination in a Bricks “Posts” element.

If you need pagination in a “Posts” element, enable it with its “Pagination > Show” setting. Alternatively, you can add a Pager facet to the page.

Note that using a separate “Pagination” element with a “Posts” element will not work with FacetWP.

Using a “Products” element

Bricks - Add a Products element to your page.
Add a “Products” element to your page.

The “Products” Element, which is available if you have WooCommerce installed, is supported since version 0.5 of the add-on. The instructions are the same as for the Posts element.

Add pagination to a “Products” element

The “Products” element does not have a “Pagination” setting (like the “Posts” element), but you can add a Pager facet to the page.

Note that using a separate “Pagination” or “Products Pagination” element with a “Products” element will not work with FacetWP.

Using a “Query Loop” feature

To set up the “Query Loop” feature for use with FacetWP, follow these steps:

  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 ContainerBlock, 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.

 

  1. 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}.

  2. 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

Here is a short video demonstrating the above Query Loop setup steps. It also shows how to add a Shortcode element with a facet shortcode above the Query Loop:

Add pagination to a “Query Loop” element

Bricks - Select the right 'Query Loop' element when using a Bricks 'Pagination' element.
Select the right “Query Loop” element when using a Bricks “Pagination” element.

If you need pagination in a “Query Loop” element, you can add a separate “Pagination” element.

To work properly with FacetWP, this element needs to be in the same parent container as the Container, Block, or Div element for which the Query Loop and FacetWP are enabled.

Next, make sure to select this Container, Block, or Div element in the “Pagination” element’s “Query” setting.

Alternatively, you can add a Pager facet to the page.

Change query arguments or manually add FacetWP support to elements

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

The “Use FacetWP” setting should be used where available. However, it is also possible to manually enable FacetWP on a query element, by setting the "facetwp" => true query argument with Bricks’ “bricks/posts/query_vars” filter.

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

There are no reviews yet.

Write a review

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top