Get Bricks

Query Sort, Filter & Live Search

February 9, 2024

Bricks 1.9.6 introduces Query Sort, Filter & Live Search as an experimental feature.

This new feature set enhances content interaction through AJAX-powered filter elements such as search, checkboxes, select options, radio buttons, range sliders, and date selectors.

It allows for advanced real-time content sorting, filtering, and searching without a page refresh. Resulting in a more dynamic and interactive user experience.

How To Enable Query Filters

To explore this new, currently experimental feature, you have first to enable it from your WordPress dashboard under Bricks > Settings > Query filters.

Once enabled, the new filter elements will be available in the builder elements panel.

Important Notes

  • Experimental feature: Subject to change at this experimental stage. Please don’t use it on production websites! Only meant for testing and providing feedback.
  • Compatibility warning: It might conflict with plugins that override the bricks/query/force_run filter. It is best to avoid using it in combination with other filter plugins.
  • Scope limitation: Query sort & filter are currently limited to Post Queries (WP_Query) targeting the outer layer (in nested query scenarios).

How To Setup A Filter

When adding a filter element to your page, ensure to assign it a “Target Query” when editing it. This is necessary so Bricks knows which query a particular filter should affect.

This flexibility of setting the Target Query on the filter element itself allows you to add your filters anywhere on your page. You don’t have to arrange all your filters inside one block.

You can, for example, add a sorting element somewhere else on your page, as we did in the following example. Where all filters are located inside the left-hand column, and the sorting element is placed inside the right-hand column right above the query loop.

Apply On “Input” Or “Submit”

By default, any change you apply to a filter, such as selecting a different radio filter option or a checkbox filter value, updates the target query. You can change this behavior by setting the “Apply to” control to “Submit.” This way, the query will only be updated by clicking the “Filter – Submit” element connected to the same Target Query.

Filter elements

1. Filter – Search

  • Function: Live AJAX search.
  • Debounce (ms): Control the delay before triggering the search after typing stops. Improving performance by reducing unnecessary search queries.
  • Min. characters: The minimum number of characters required to trigger a search. Searches will not initiate with fewer characters. The default is 3 characters.

2. Filter – Checkbox

  • Filter options: Taxonomy, Post Fields, Post Meta Fields.
  • Hierarchy display: Supported.

3. Filter – Date

  • Filter options: Taxonomy, Post Fields, Post Meta Fields.
  • Enable time: Adds time selection capability to the date filter.
  • Date range: Enables selection of a range of dates.
  • Min/max date: Option to utilize minimum and maximum dates from the index table for filtering.

4. Filter – Radio

  • Filter options: Taxonomy, Post Fields, Post Meta Fields.
  • Hierarchy display: Supported.
  • Action: Choice between applying a filter or sorting.
  • Mode: Option to select “Button” style or traditional “Radio” inputs for the filter display.

5. Filter – Range

  • Source: Currently limited to “Custom Field” to specify a meta key (e.g. _regular_price, which represents the standard product price in WooCommerce).
  • Automatic min/max: Automatically sets minimum and maximum values based on the results of the query loop.
  • Mode: Offers a choice between a “Slider” or “Input” style for the range selection.

6. Filter – Select

  • Filter options: Taxonomy, Post Fields, Post Meta Fields.
  • Hierarchy display: Supported.
  • Action: Choice between applying a filter or sorting.

7. Filter – Submit

  • Functionality: Provides buttons to reset or submit (apply) all filters of the target query.

Dynamic Data Tags

The Query Sort / Filter comes with two new dynamic data tags (search_term_filter, query_results_count_filter) whose value automatically updates whenever the query results change.

{search_term_filter:quer34} – Wraps the search term result in <span data-brx-ls-term="quer34">>. Updates dynamically with AJAX when the targeted Query ID quer34 (your element’s Query ID) is refreshed.

{query_results_count_filter:quer34} – Encloses the query results count in <span data-brx-qr-count="quer34">>. Dynamically updates in response to AJAX changes in the Query ID quer34 (your element’s Query ID).

The new search_term dynamic data tag renders the search term value.

{search_term} – Outputs the value of $_GET['s'] or get_query_var('s'), ideal for displaying the current search term on the page.

{search_term:quer34} – Retrieves the search query variable from the Query ID quer34. To find your Query ID, copy the element ID of the query element into your clipboard and use the last six characters, omitting the “#brxe-” prefix.

It is meant to be used on a static search results page. To display the search term value of the Filter - Search element, make sure to use the new search_term_filter dynamic data tag instead.

While the “Filter – Search” element connected to a Target Query updates the results immediately, it is meant to be used for search queries that you render on the initial page load, such as your WooCommerce shop page or your blog home page.

You can also create a true live search, whose query results only appear after performing a search using the “Filter – Search” element.

All you need to do is enable the “Is live search” setting inside your target query loop element like this:

Once enabled, this query only runs when a live search is performed.

To hide the query initially (on page load), edit the element that holds your live search results. This is usually the parent element of your query loop or another outer element of your query.

Then, copy its element ID (e.g. #brxe-dx44gp), return to your query settings, and paste this element ID from your clipboard into the Live search results text input field.

Live search demo: https://youtu.be/5oDHG-bTAfQ?si=ZR61wiAVxFFbjP-c&t=461

Update Filter Index

Applicable for checkbox, datepicker, radio, rage, and select elements inside the builder. Also available from the WordPress dashboard under Bricks > Settings > Query filters.

  • Purpose: Ensures all filter options are up-to-date.
  • Function: Saves and refreshes the builder window, indexing to a custom table.

Custom Option Labels

Applicable for checkbox, radio, and select elements.

  • Use Case: “Source” is set to “Custom field” or “WordPress field.”
  • Example: Mapping _stock_status to a user-friendly label.