Add Bricks Builder Filters with JetSmartFilters

Do you want to add Bricks Builder Filters to let your users better navigate your Loop feeds? Then try the JetSmartFilters Integration, combined they create a great user experience. Let Crocoblock show you how it is done.

Setting up Bricks Builder

First things first, we need to get our Bricks Builder ready. Here’s how you do it:

1. Go to the Bricks settings tab on your WordPress dashboard.
2. In the general section, enable the post types you want to edit with Bricks.
3. Make sure the page toggle is enabled.
4. Scroll down and hit the save settings button.
5. Now, move to the pages and click add new.
6. Enter the page title and hit the edit with Bricks button.

You’re all set! Now, we’re ready to start building.

Creating a Bricks Builder Query Loop

Now, we’re going to create a Bricks Builder Query Loop. Here’s how you do it:

1. Press the plus sign icon to add a new section.
2. Click on the container element in the structure.
3. Add a div element and enable the user query loop.
4. Set the number of posts per page (for example, nine).
5. Create a custom query with the Jet Engine query builder.
6. Enable the is filterable toggle.
7. Enter a query ID into the query ID for filters field.

Voila! You’ve created a Bricks Builder Query Loop.

Styling the Query Loop

Now, let’s make our query loop look good. Here’s how you do it:

1. Go to the style tab of the div element.
2. Set the width to 32 percent (this allows you to display posts in three columns with gaps).
3. Add the dynamic field element to display the post titles.
4. Add the dynamic image to display the post thumbnails.

Now, our query loop is not just functional, but also good-looking!

Adding Bricks Builder JetSmartFilter

Next, we’re going to add a Bricks Builder JetSmartFilter. Here’s how you do it:

1. Place the needed element on the canvas.
2. Set options for the filter type.
3. Click the save button.

And just like that, you’ve added a Bricks Builder JetSmartFilter!

Testing the Filter

Now, let’s see if our filter works. Here’s how you do it:

1. Check the filter functionality on the front end.
2. Try a search filter example.

If everything works as expected, congratulations! You’ve successfully applied JetSmartFilters to the Bricks query loop.

Troubleshooting Common Issues

Even with the best of setups, you might run into some issues. Here are a few common ones and their solutions:

• Filter not working
  Make sure you’ve correctly set the options for the filter type and saved the settings. Also, check if the query ID matches in both the filter and the query loop.
• Posts not displaying correctly
  Check the width setting in the style tab of the div element. Adjust it to display the posts as you want.
• Custom query not working
  Ensure that you’ve correctly set up the custom query in the Jet Engine query builder. Also, the indexer option works with posts and users but not with the terms source.

Remember, every problem has a solution. So, don’t worry if you run into issues. Take a deep breath, troubleshoot, and you’ll get it working!

Conclusion of Creating Bricks Builder Filters with JetSmartFilters

So, we’ve just walked through the process of applying JetSmartFilters to the Bricks query loop. I hope you found this helpful and feel free to share your thoughts in the comments. Until next time, happy building!