Updated on 8 Jul 2025
In the unofficial Bricks Discord chat, a user asks:
I have a problem I need to solve, I need for this Bricks Query to show 0 result until someone use Facet filter on the left side from WP GridBuilder. I use ACF for custom post type. I try bunch of solutions but without success. Anyone has some tip ?
This Pro tutorial provides the steps to use custom JavaScript to hide the Bricks QL posts until there's an interaction by the user on the frontend like ticking a category or typing in a search facet when using WP Grid Builder.
We shall show a fallback div having "Use any filter to see the filtered posts." text initially on page load and whenever any applied facet has been cleared.
When not filtering:
After filtering:
When an applied filter is removed, the posts will be hidden and fallback shown.
Tested on these types of facets:
- Search Field
- Checkbox
- Radio Button
- Dropdown
- Reset
Step 1
Set up a query loop in your Bricks template or a Page.
Section JSON for quick copy and paste. Note: ACSS classes and variables are used.
Make sure you create your facets first in WP Grid Builder. In the Facet elements (via the WPGB Bricks integration), select your facets and the query loop.
Query loop-enabled Block's parent's class is posts-grid__inner.
The Fallback Text has a class of fallback-text.
We will be referencing these in the JavaScript below.
Step 2
Create a file named say, wpgb-facet-hide-posts.js in your child theme's /assets/js path having:
