Views plugin lets you display lists of posts on a site’s front-end. These can be posts, pages, and posts based on your Custom Post Type. Further, you can add front-end filters to your post lists to allow visitors to see only posts that match the filter.

In this tutorial, we show you how to add front-end filters to WordPress Archives and Views that you create with Toolset plugins.

Examples for front-end filters:

A filterable archive based on taxonomy terms. See live example
A filterable archive based on taxonomy terms.
See live example
A filterable list of custom posts based on a custom field. See live example
A filterable list of custom posts based on a custom field.

You can set up your own practice site, or use the Toolset training site that we created for you (and has everything installed and ready).

Example 1 – An archive, filtered by taxonomy terms

get-low
Example 1 - click to watch, click again to pause

We add a filter to the consultant archive page so your visitors can see consultants that speak a specific foreign language. The Foreign language is a custom taxonomy.

Custom taxonomy and its terms - back-end view
Custom taxonomy and its terms – back-end view

Our example includes:

  • Consultant – a Custom Post Type (CPT)
  • Foreign languages – a custom taxonomy for the Consultant CPT
  • Chinese, French, Spanish – terms of the Foreign languages taxonomy

Filterable archive – Steps to follow

To add a filterable archive, we create a custom WordPress Archive for our Consultants. The archive will use the custom search feature of the Views plugin.

Steps in a nutshell (see the video for complete instructions)

  1. Create a WordPress Archive for your Custom Post Type.
  2. Enabling the Filter section
    Enabling the Filter section

    Use the Screen Options to enable the Filter section.

  3. Custom Search Settings
    Custom Search Settings

    Scroll down the screen to the Custom Search Settings section and choose AJAX results update when visitors change any filter values.

  4. Include your taxonomy as a filter
    Include your taxonomy as a filter

    In the Filter Editor, include your taxonomies as filters – Use the New Filter button (see the screenshot for details)

  5. Turning your radio box into a “flat” list of options
    Turning your radio box into a “flat” list of options

    Turn your radio box into a “flat” list of options.

    1. Wrap your filter into an additional div tag, for example:
      div to add
      <div class="portfolio-filtering">
    2. Open the CSS Editor below and insert the following code:
  6. Stroll down to the Loop Output Editor. Design your output the way you like. In our example, we used the table-grid option and we included the post title as a link and the Consultant image field.
  7. Save your changes and visit your archive on the front-end.

Your filter should work now. Choose a language and click on it. Your list will then show only consultants speaking that language.

Example 2 – How to build a list of posts filtered by a custom field

get-low
Example 2 - click to watch, click again to pause

We will create a View that displays services in a grid. Visitors will be able to filter the list of services using a drop-down that lists “target group” options.

Custom field of the Service Post Type - back-end view
Custom field of the Service Post Type – back-end view

In our example, we will use the following data:

  • Service – a custom post type (CPT)
  • Customers – a custom field representing customer groups as a list of checkboxes

If a group has been checked, it means that this service is available for that group of customers.

Filterable list of posts – Steps to follow

  1. Create a View that lists posts from your custom post type (in our example, services).
  2. Use the Screen Options to enable the Filter section.
  3. In the Custom Search Settings section, choose AJAX results update when visitors change any filter values.
  4. In the Filter Editor, include your custom field – Customers in our case. Check dropdown as your Input type.
  5. Design your output the way you like. In our example, we used the table-grid option and we included the post title as a link and the Service image field.
  6. Save your View.
  7. Add your View to a page and test it.

By default, it should display all your services. If you select a different value from your dropdown, your grid should immediately update to limit the results to only posts from that group.

Check the complete version of our training site to compare your results.

Share your filterable list with us

Filterable portfolio built with the Toolset Starter theme
Filterable portfolio built with the Toolset Starter theme

Do you have a filterable list working? We would love to see it.

If you have used our training site to test the feature, please share a link. If you have your own site with a filterable list, even better!

The one on the left is from our Toolset Starter theme.