What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Add Post Filter in WordPress Front-End

How to Add Post Filter in WordPress Front-End

No matter your site is a large one that has the rich content or a small one that contains the weekly updates, you need to make it easy-to-browse. Here, we mean you should make sure that people can find what they want to check easily and quickly. To ensure this kind of reading experience, you can think about the utilization of post filter in WordPress sites.

With this special function, you can give people the freedom to sort and to filter your blog posts. Frankly speaking, the post filter makes sense for the common blogs and is even more meaningful for some product listing sites and photo galleries.

In the following, we’d like to share the simple steps of how to add post filter in WordPress front-end.

Add Post Filter in WordPress using Beautiful Taxonomy Filters

One of the easiest and time-saving methods to add post filter in your WordPress site is to utilize the Beautiful Taxonomy Filters plugin. With it, you can ensure the filtering freedom for your readers to sort and to find their wanted contents from your site with ease. Note that the filtering and sorting achieved by this plugin are based on the tags, categories and taxonomies.

Set Up the Basic Settings

To use it, you firstly need to set up its basic settings. Here, you should click the Settings > Taxonomy Filters button.

From the basic settings, you can decide to activate the filter for which post types. Also, you can exclude some taxonomies that you do not want people to filter on.

Basic Settings

Here, we need to note that if your post types are not connected to any taxonomy, you cannot see any result for these settings.

In addition, you can choose to automatically insert the filter modules into your archives, along with your wanted filter location.

Filter Modules

Lastly, you need to choose the filter styling or add the custom CSS styling as you want. Note that you can pick up between the options of Light design and the Dark design.

Filter Styling

In most cases, the Light one is proper for common websites.

Light design

Decide the Advanced Settings

From this part, you need to tune the filter modules properly by enabling some additional features or not.

  • Select2 Library – This feature is used for the improved drop-down function.
  • Clear All Link – This is the link that showcases next to the Submit button to clear all the current filters.
  • Hide Empty Terms – This can hide all the terms that have no posts connected to them.
  • Post Count – This feature tells people how many posts available for each term.
  • Filter Heading – If you want, you can choose to remove all the headings for your filter.
  • Dropdown – For the drop-down feature, you can display the Show All Options at the top of it or showcase the placeholder text that allows people to deselect any current term.

Advanced Settings

Showcase the Post Filter in WordPress

Now, you can save the settings and paste the below code into the archive.php file for the showcase of post filter.

Filter Code

Note that based on the themes you use, the layout of the archive.php can be different. In this case, you’d better try some locations when inserting the code to figure out the best placement for the filter. Personally, this method is proper if you want to show the filter in the upper section of the whole screen.

However, if you want to show it on the sidebar, you can use the Beautiful Filter widget.

Beautiful Filter Widget


Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.