The Tabs Filter widget will allow website visitors to filter posts dynamically on the page by clicking the different tabs. Each time a user will click on a tab the post widget will filter accordingly and show the posts related to the term or tag selected.
The Tabs filter is a universal solution which can connect to any post widget inside of Unlimited Elements widget library including Post & Product Gallery widgets and Dynamic Loop widgets. Our filter solution works also with two or more synced widgets using the connect widget settings.
Add Post Widget to Page #
Before starting with the Tabs Filter you will need to add a post widget to the page. For example you can add: Post Grid, Post List, WooCommerce Grid and many more supported widgets.
Post Widget - Post Query #
After you have added the post widget to the page you need to setup the post query to show whatever initial posts you want to show when the page is loaded. If you are not familiar with post query you can visit our documentation for step by step guidance on how to show the posts you want in your post widget.
Post Widget Ajax #
Navigate to the “Posts Pagination and Ajax” and enable the Post Filtering option. Now you can choose the Filter Behaviour:
- Ajax
- Ajax with URL change
Add Tabs Filter to Page #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Tabs Filter”
- Hover over the widget in the search results and click install
- Add your “Tabs Filter” widget to any Elementor Page
Tabs Filter Settings #
Add First Item - All
Resets the post widget to its initial query and adds an ALL item in the tabs filter.
First Item Text
The text for the first "All" tab
Sync to Post Widget After Load
When this option is chosen there is no need to select terms manually. The filter will populate automatically according to the Post Widget terms.
First Tab Selected
Determine if the first tab of the filter will be selected by default on page load.
Override Query Items
The filter will override the terms selected in the post query of the post widget.
* Use when the "Add first Item ALL" option is turned off.
To override the output of the post widget.
Filter Role
- Single - When there are no children filters.
- Main - Set filter to be parent filter of children filters.
- Child - A child filter of a parent. Will be visible only when parent is selected.
To learn more about creating multi-level filters visit the step-by-step tutorial in the link below:
Terms Selection #
Determine which terms to show in your filter.
Select Post Type
Select which post type you want to filter. This should be the same as in your post widget. Fore example: Pages, Posts, WooCommerce Products or any other Custom Post Type.
Select Taxanomy
Select what kind of taxonomy yo want to filter:
- Category
- Tags
Include By
- Specific terms
- Children of
- Children of current term
- By search text
- Only childless
- Not a child of another term
- Term meta
Exclude By
- Specific Terms
- Current Term (for archive only)
- Hide Empty Terms
Max Number of Terms
Set the maximum number of terms to show in your filter.
Order By
- Name
- Slug
- Term Group
- Term ID
- Description
- Parent
- Count (number of posts associated)
- Include (specific terms order)
- Meta value
- Meta value (numeric)
Order Direction
- Accending
- Descending
Show Query Debug
Show the query for debugging purposes. Don't forget to turn it off before the page is published.
Tabs Filter Layout Settings #
Show Icon
Add an icon to the tabs.
Icon
Select an icon for the filter items.
Layout
- Flex - Inline
- Grid - Columns
Gap
Space between tabs
Show Number of Posts
Shows the number of posts assigned to each tab.
Show Number on "All"
Shows the number on "ALL" filter tab.
Show Image
Show an image for each filter item.
Image Meta Field
Type in the meta name of the image field you want to show.
Show Debug Meta Fields
Show related meta field names you can use.
Tabs Filter Loader Settings #
Loader Type
- Grayed Tabs
- Hidden Tabs
Limit Num Tabs
Limit the number of tabs shown when the page is loading.
Tabs Filter Responsive Settings #
Responsive Behaviour
- None
- Swipe to Scroll
- Toggle
Responsive Breakpoint
Set the screen resolution in pixels from when the responsive behaviour will take action.
Open Toggle Icon
The icon for opening the filters.
Close Toggle Icon
The icon for closing the filters.
Toggle Alignment
Set the alignment for the toggle.
Tabs Filter Item Styling #
Set the style for the filter items. You can add different styles for different states: Normal, Hover, Selected.
Tabs Filter Icon Styling #
Set the style for the filter icon.
Tabs Filter Post Count Styling #
Set the style for the filter post count.
Tabs Filter Toggle Styling #
Set the style for the filter toggle.
Multi-Level Filter Tutorial #
Video Overview #
Usage Example #
Create Multi-Level Filters
Add filters to multi-source galleries
Add Filters to WooCommerce widgets
Connect two post widgets with the sync feature and filter them together using the Tabs Filter widget.
Widgets That Work with Tabs Filter Widget #
Thank you for reading 🙂 To see the Tabs Filter in action you can visit our live demo in the link below:
