Search For Tags:
This animated and filterable tag cloud is the Shuffle Box. It is available with my plugin Tag Groups. Sort your tags into groups and tidy up WordPress site. 🧡
Tag Groups - Premium Plans
In this short tutorial we will create a post filter for a WordPress site without any coding. Visitors click on tags and see all matching posts.
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.
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.
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.
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”.
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.
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:
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.
This animated and filterable tag cloud is the Shuffle Box. It is available with my plugin Tag Groups. Sort your tags into groups and tidy up WordPress site. 🧡