Recap: Where We Are Now
Our recipe blog currently features a hero section at the top, followed by the actual recipe listings. In this tutorial, we’ll explore adding custom filters to enhance the user experience. We’ll use three filters and one sort function in this example, but the principles can be applied to any number of filters you wish to implement.
If you missed the first video in this series, you can view it here: Mastering Bricks Builder.
Understanding Our Filters
We have three types of filters:
- Recipe Type: A custom taxonomy associated with our custom post type for recipes.
- Calories Per Serving: A custom metafield using Advanced Custom Fields (ACF).
- Cooking Time: Another custom metafield using ACF.
Setting Up the Filters
- Insert the Filter Container:
– First, insert a container to hold the filters between the hero section and the recipe listings.
– Add three blocks inside the container for the three filters. - Enable Beta Features:
– Since filtering is currently a beta feature in Bricks, you’ll need to enable it. Go to your dashboard, navigate to Bricks settings, and enable “Query Filters”. - Add the Filters:
– Recipe Type:
– Select the first block and add a filter element.
– Target the query and select your custom taxonomy.
– Configure the filter to hide empty values and set a placeholder like “Choose a recipe type”.
– Calories Per Serving:
– Add another filter element to the second block.
– Target the query and select the custom field for calories.
– Use a slider for user input.
– Cooking Time:
– Repeat the process for the third block, targeting the custom field for cooking time with a slider input.
Styling the Filters
- Global Classes:
– Apply global classes to the filter container and blocks for consistent styling.
– Use BEM naming conventions for easy identification and future edits. - Styling Elements:
– Add headings to each filter block.
– Adjust padding, background colours, and borders to match your site’s design.
– Use global classes to ensure that all similar elements update together when changes are made.
Testing the Filters
With everything set up, it’s time to test the filters:
- Recipe Type: Select a type like “Desserts” to see the list update.
- Calories Per Serving: Adjust the slider to filter recipes based on calorie count.
- Cooking Time: The slider filters recipes by preparation time.
Adding Sorting Options
In addition to filters, you can also add sorting options:
- Duplicate a filter block and change its title to “Cooking Time”.
- Add a filter element and configure it to sort based on cooking time, both ascending and descending.
Conclusion
Following these steps, you can elevate your recipe blog from a basic WordPress site to a fully customized and user-friendly experience. With Bricks and ACF, you have powerful tools to create dynamic and interactive content.
