How To Show Your WordPress Posts or Products With A Filter

In the following tutorial I will walk you through the steps to display a list of WordPress post with a filter. The list of posts refreshes live when you change one of the filters. When you go to a post and then return to the list, the page will remember and restore the previously selected filters.

We’ll be using the Tag Groups Premium plugin because it allows us to turn post tags into filter options and to display them in groups. You will understand the advantage in the following real-life example.

Our Example: Language Courses

For this tutorial let’s assume that we are creating a website for a language school. Each post represents a course and we choose as post tags all key parameters that help us search and organize them.

First Step: Create Groups

If we are dealing with ordinary posts, you don’t need to bother about taxonomies. A taxonomy is something like a tag type and they are connected to post types.

Just in case you are using another post type, such as WooCommerce products or portfolio items, you will have to enable the corresponding taxonomy.

Go to the submenu Taxonomies and check the taxonomy that contains the tags that will serve as filter options. When you hover your mouse over a taxonomy, you will see the corresponding post types.

In our example, courses are just default WordPress posts. That means that we use “Tags (post_tag)”.

Next, go to the corresponding Tag Group Admin page. You find it under the Posts menu, but there is also a shortcut: Simply click on the icon left of your activated taxonomy – in the screenshot above it is blue.

Here we create three groups to contain our tags: language, level and method. You will see in a while what they stand for.

Let’s now continue with the tags. We can later return again and edit our groups.

Second Step: Sort Your Tags Into Groups

On the Tags page we go through all tags and assign them to the appropriate groups. “English”, “French” and “Italian” go into “language”, “beginner”, “intermediate” and “advanced” into “level” and so on. You can do it one-by-one or select all tags of one type and use the “Bulk Action”.

Bonus Tip:

It is also possible to assign your tags to groups immediately when you create them in the posts. First make sure that you enable the “Meta Box” feature in the settings.

With the Meta Box you can create new tags or assign them to groups right inside the post.

On the screenshot you can see that the tag “Italian” is green. That means that it is new in that group and will be assigned once you save the post.

Third Step: Add Shortcodes

As filter we will use the Toggle Post Filter. It consists of three shortcodes or Gutenberg blocks: One for the filter menu with the toggle switches, one for the filtered list of posts and a last one for the message about how many items we have found. In this tutorial we configure the filter with shortcode parameters.

We will use the following options:

• accordion: Groups are folded so that the filter doesn’t take too much space.
• persistent_filter: Visitors who clicked over to a course and then returned to the filter can continue where they left off.
• customized messages: We’ll be talking about “courses” instead of “posts”.
• default_show_posts: If no tag is selected, the list of courses appears unfiltered and shows all posts so that visitors don’t see an empty list.
• caching_time: Increase the performance of repeated queries.
• display_amount: Show the amount of courses found.
• pager: If the list gets too long, visitors need to click to the next page.
• div_class: We use one of the out-of-the-box themes.
• transition: We choose a smooth transition.
• operator: We want to show courses that match at least one parameter of each group.
• not used here – taxonomy: In our example we don’t need to mention the taxonomy since we’re using the default, that is post_tag.

We insert the filter into a new page that we call “Find a Language Course”.

Here is the code again, if you need to copy it:

[[tag_groups_dpf_toggle_menu persistent_filter=20 accordion=1 default_show_posts=1 caching_time=60 display_amount=1 pager=1 div_class="dpf_toggle_menu_dark" transition=fade operator="IN AND" message_amount_singular="One course found." message_amount_plural="We found {count} courses."]]

In this example we are using a table so that the filter toggles appear next to the post list. You can, of course, choose any other method or layout.

Let’s see how it looks on the front end. Voilà!

I am searching for an Italian course for intermediate or advanced students:

You still may want to adjust the design to match your theme, or place the posts below the filter. It’s up to you.

By the way: The appearance of the post items in the right column can be customized in the settings. Go to Front End, Post Filter and experiment with the template.

That’s all you need to launch your own live post filter. If you want to see it in action, you could filter recipes.