September 20, 2023

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

Play Video

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.

Required Resources

Elementor Logo
Free Options
Credit to Jeffrey at Lytbox
Jeffrey's Lytbox Studio is a YouTube channel dedicated to empowering aspiring website creators by offering web design tutorials, insights into the business side of web design, and fostering creativity and skill development. With a strong focus on Elementor, Jeffrey shares his journey from a techno-dinosaur to a successful freelancer and design studio owner, aiming to inspire and educate others in their quest for freedom and purpose through the world of web design.
Filter Taxonomies with the Elementor Loop Grid Filter without any Extra Plugin
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.