July 21, 2023

Add Bricks Builder Filters with JetSmartFilters

Play Video

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!

Required Resources

JetSmartFilters Logo
Payment required
Bricks Builder Logo
Payment required
Credit to Crocoblock
Crocoblock is a YouTube channel dedicated to providing tutorials, tips, and insights on WordPress and web design. With a focus on the Crocoblock suite of plugins and themes, the channel offers valuable content for WordPress enthusiasts, developers, and designers looking to enhance their skills and create websites with their tools. Through step-by-step tutorials, product overviews, and expert advice, Crocoblock helps its audience master the art of WordPress website building and customization.
Add Bricks Builder Filters with JetSmartFilters
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.