Attributes Filter Element

The Attributes Filter element allows you to filter the items displayed in the Items element.

Adding Attributes Filters

  1. Go to Magzine > Website Builder and click Add New.
  2. Give your template a title and from the Template Settings panel on the right select “Page” from the Type dropdown. Finally click the Edit with Elementor button.
  3. From the left side find the Attributes Filter element and drag it into the page.
  4. Enter an ID in the Item Element ID field e.g. “my-post-items” – this will be the ID you give your Items element.
  5. Next right click on the columns icon in the top left corner and click Add New Column.
  1. From the left side find the Items element and drag it into the new column.
  2. Select the desired template from the Primary Item Template dropdown menu.
  3. Click the Advanced tab and in the CSS ID field enter the ID you used in the Attributes Filter e.g. “my-post-items”.
  4. Save your template.

Filtering By Different Attributes

Once you’ve set up an Attributes Filter as explained above you can filter by taxonomy.

  1. Go to Posts > All Posts, edit your posts assign your posts to categories.
  2. Now go back to your template with the Attributes Filter, edit the element and click the Add Item button.
  3. Leave the Taxonomy dropdown menu set to “Taxonomy” and Terms set to “Categories”. You will now see a list of all your categories.
  4. Now when you click on a category in the Attributes Filter it will show posts from this category in the Items element. Clicking multiple categories will only show posts that are in all those categories.
  5. Save your template.

Once you’ve set up an Attributes Filter as explained above you can filter by price.

  1. Go to Posts > All Posts, edit your posts and scroll down to the Page Settings panel and enter a price in the Price field.
  2. Now go back to your template with the Attribute Filters, edit the element and click the Add Item button.
  3. Select “Price” from the Attribute dropdown menu.
  4. In the Option Values text box add the values you want to show in your price filter in format value:Name, separating each option with a comma. The below example will show three options where the text you see shows “$10.00” with a value of 10, “$20.00” with a value of 20 and “$30.00” with a value of 30. If you click the $20.00 filter, any posts with a price of 20 will be displayed.
    10:$10.00,
    20:$20.00,
    30:$30.00
  5. This time in the Option Values text box add the example below. The first option will display posts that have a price between 0 and 10. The second option will display posts that have a price between 10 and 20. And the third option will display posts that have a price between 20 and 999 (a really high number to include all prices above 20).
    0|10:Up to $10,
    10|20:$10-20,
    20|999:$20 and above

Once you’ve set up an Attributes Filter as explained above you can filter by release date.

  1. Go to Posts > All Posts, edit your posts and scroll down to the Page Settings panel and enter a date in the Release Date field in the format YYYY/mm/dd.
  2. Now go back to your template with the Attribute Filters, edit the element and click the Add Item button.
  3. Select “Release Date” from the Attribute dropdown menu.
  4. In the Option Values text box add the values you want to show in your release date filter in the format value:Name, separating each option with a comma. The first option will display posts that have any release date (value is left empty). The second option will display posts that have a release date from 30 days ago up to today. And the third option will display posts that have a release date from 180 days ago up to today.  The date value can accept any strtotime value.
    :All Dates,
    30 days ago|today:Last 3 Months,
    180 days ago|today:Last 6 Month

Once you’ve set up an Attributes Filter as explained above you can filter by site rating.

  1. Go to Posts > All Posts, edit your posts and scroll down to the Page Settings panel and enter a rating in the Site Rating field.
  2. Now go back to your template with the Attribute Filters, edit the element and click the Add Item button.
  3. Select “Site Rating” from the Attribute dropdown menu.
  4. Set the Meta Compare dropdown menu to “>=”.
  5. In the Option Values text box add the values you want to show in your site rating filter. The first option will displays posts that have any rating (value is left empty). The second option will display posts that have a site rating of 1 and so on.
    :No Minimum,
    1,
    2,
    3,
    4,
    5

Once you’ve set up an Attributes Filter as explained above you can filter by user rating.

  1. Allow users to add ratings to posts in one of the following ways.
  2. Now go back to your template with the Attribute Filters, edit the element and click the Add Item button.
  3. Select “User Rating” from the Attribute dropdown menu.
  4. Set the Meta Compare dropdown menu to “>=”.
  5. In the Option Values text box add the values you want to show in your user rating filter. The first option will displays posts that have any rating (value is left empty). The second option will display posts that have a user rating of 1 and so on.
    :No Minimum,
    1,
    2,
    3,
    4,
    5

Once you’ve set up an Attributes Filter as explained above you can filter by user votes.

  1. Allow users to add ratings to posts in one of the following ways.
  2. Now go back to your template with the Attribute Filters, edit the element and click the Add Item button.
  3. Select “User Votes” from the Attribute dropdown menu.
  4. In the Option Values text box add the values you want to show in your user votes filter in format value:Name, separating each option with a comma. The first option will displays posts that have any user votes (value is left empty). The second option will display posts that have user votes from 0 – 500. The third option will display posts that have user votes from 500 – 1000.  And the fourth option will display posts that have more than 1000 user votes.
    :No Minimum,
    0|500:500 votes or less,
    500|1000:500 - 1000 votes,
    1000|9999:More than 1000 votes