The Post Cards element doesn’t have a built-in filter option, but you can still create a filter by using the Navigation Bar element and “linking” it to the Post Cards. This approach allows for greater customization of the filter while keeping the Post Cards element more lightweight, as it will typically be used without a filter.
You can view a sample filter on the Reach demo (this filter uses the Ajax filter type – more on types below).
Step 1: Add a unique ID to your Post Cards Element
The first step is to edit your Post Cards element and give it a unique Element ID. This will allow us to connect it to the navigation bar later.
Step 2: Add a Navigation Bar element
Insert a new Navigation Bar element on the page and under the Menu tab enter the unique ID defined previously in the Post Cards.
Step 3: Edit Your Navigation Bar Menu
Now that you’ve connected the Navigation Bar and Post Cards element using its Element ID, you’ll want to edit the Navigation Bar menu to display the filter items you need. You can choose to display a dynamic menu or a custom menu created through Appearance > Menus.
If you created a custom filter via Appearance > Menus you will want to add an “All” link as the first menu item. This will be done using a custom link and adding a # symbol for the URL.
Filter Types
When creating a filter for your Post Cards element, you can select from various filter types, with the default being a masonry show/hide filter. To change the filter type, simply click on the “Filter” tab in the Navigation Bar element, where you can customize your filter settings.
It’s important to choose the filter type that best fits your needs. For smaller grids, select a filter that shows or hides items already visible on the page. For larger grids, pagination, or when you want to display a specific filter on page load (instead of showing all items), opt for the AJAX filter.
Video Guide
Here is an older video guide we created before the Post Cards element was created, but the process is still the same. If you are having trouble following the written steps above the added visual may be helpful.
Advanced Filtering?
If you need a more advanced filter that includes many filter types (multiple terms, date, meta query, etc) Total does have a built-in API you can make use of to create a custom filter via your child theme. Check out the Advanced Ajax Filter Snippet.
Total is also compatible with the free Search & Filter plugin which is very nice.