Filter Taxonomies with the Elementor Loop Grid Filter without any Extra Plugin

With the Elementor loop grid filter, a new feature was introduced that simplifies the process of creating filters for blog posts based on categories and tags. Gone are the days when you had to rely on plugins or alternative hacks. The new feature, known as the Taxonomy Filter, is built right into Elementor and is designed to make your life easier. Let’s dive into how you can set it up and use it effectively.

Setting Up the Taxonomy Filter

Activate Necessary Features

1. Navigate to Elementor settings.
2. Ensure the Flexbox Container, Loop Builder, and Taxonomy Filter are activated. These might be in beta, but they’re essential for the filter to work.

Accessing the Archive

1. Go to your templates. For this tutorial, we’ll be working with an archive, which is essentially the page that showcases all your blog posts.
2. Once inside the archive, set up a container with the Loop Grid. This grid displays your blog posts with their respective categories.

Adding the Taxonomy Filter

1. In the widgets section, type “tax” to find the Taxonomy Filter widget.
2. Drag and drop this widget above or beside your Loop Grid.
3. In the widget settings, select the Loop Grid you’ve created.
4. Decide what you want to filter: categories or tags. For this guide, we’ll choose categories.

Styling and Customizing the Taxonomy Filter

Orientation and Alignment

1. You can choose the direction of your filter: vertical (ideal for sidebars) or horizontal (perfect for headers).
2. Align the filter to the left, center, or right based on your design preference.

Filter Settings

1. Ensure empty items are turned off to avoid displaying categories like “Uncategorized”.
2. Decide if you want to show child categories.
3. Customize the first item in the filter. For instance, it can be labeled “All Posts”.
4. Limit the number of taxonomies displayed if you have numerous categories.

Styling the Filter

1. Adjust the typography and colors to match your website’s design.
2. Decide between a minimalistic style or a more creative pill-shaped tab for the filter buttons.
3. Customize hover and active states for better user interaction.

Testing the Filter

After setting up and styling the filter, it’s essential to test it on the frontend. Ensure it works seamlessly, and the filtering process is smooth. Remember, the primary goal is to enhance user experience, making it easier for visitors to find the content they’re interested in.

Elementor Loop Grid Filter Conclusion

The Taxonomy Filter in Elementor is a game-changing feature that streamlines the content filtering process on your website. By following the steps outlined above, you can set up and customize the filter to match your site’s aesthetics and improve user navigation. As with any new feature, it’s always a good idea to test it thoroughly to ensure it integrates well with your existing setup.