Adding an Advanced Filtering System

If you’re looking for an advanced filtering and search system for your listings, look no further as we have the solution.

We’ve partnered with Matt Gibbs, author of the FacetWP plugin, to offer a seamless integration with Listable. *Note that this plugin will replace all the default fields which you can easily recreate as facets.

For Adding an Advanced Filtering System you need the FacetWP plugin (sold separately).

See it live on the Listable FacetWP Demo

Let’s get into it by following the next steps.

Step 1  Install the FacetWP Plugin

You must first purchase, install and activate the FacetWP plugin.

Step 2  Create the Facet Filters

Facets are UI elements (checkboxes, dropdowns, etc.) used to filter, or “drill down”, content listings. Facets are aware of the content, and only relevant choices are displayed.

Browse to Settings → FacetWP, click on the Facets tab, then click the Add New button. FacetWP includes a sample facet (Categories) to help get you started.

For more details check out the Facet Configuration article from the official Documentation.

Step 3  Show the Filters

To make the setup easier, we’ve created a Drag & Drop interface within the Listings → Settings FacetWP tab.

After creating the facets, they will appear on the sidebar under Available Facets list. You can drag them on one of the following areas:

  1. Listings Archive. This area is where most of your facets should go (except the ones already shown in the Navigation Bar)
  2. Navigation Bar. Site-wide available facets. Choose wisely a maximum of two of the most essential filters – the rest of them go to the Listings Archive section. *Note that only a limited types of facets are suitable for this area (eg. Search, Proximity, Dropdown) and you may need extra styling for other types.
  3. Front Page Hero. Considering that Navigation Bar facets will not be shown on the Front Page, feel free to use a similar set of fields.

VIDEO Integrating FacetWP with LISTABLE

In order to better understand how the FacetWP plugin works with the Listable theme, we recommend the following video, made by Matt (the author of FacetWP plugin).

That’s it! Now you should be able to filter and search the listings using an advanced system. See a live example on a separate demo.

FAQ

1. How do I create a Location Filter?

Create a Proximity type facet and set the Data Source to geolocation_lat.

2. How do I import FacetWP demo?

Simply copy-paste this in Settings → FacetWP → Settings→ Import field.

Additional Reading:

Updated on May 31, 2017

Was this article helpful?