Adding an Advanced Filtering System

If you’re look­ing for an advanced fil­ter­ing and search sys­tem for your list­ings, look no fur­ther as we have the solu­tion.

We’ve part­nered with Matt Gibbs, author of the FacetWP plu­g­in, to offer a seam­less inte­gra­tion with Listable. *Note that this plu­g­in will replace all the default fields which you can eas­i­ly recre­ate as facets.

For Adding an Advanced Fil­ter­ing Sys­tem you need the FacetWP plu­g­in (sold sep­a­rate­ly).

See it live on the Listable FacetWP Demo

Let’s get into it by fol­low­ing the next steps.

Step 1  Install the FacetWP Plugin

You must first pur­chase, install and acti­vate the FacetWP plu­g­in.

Step 2  Create the Facet Filters

Facets are UI ele­ments (check­box­es, drop­downs, etc.) used to fil­ter, or “drill down”, con­tent list­ings. Facets are aware of the con­tent, and only rel­e­vant choic­es are dis­played.

Browse to Set­tings → FacetWP, click on the Facets tab, then click the Add New but­ton. FacetWP includes a sam­ple facet (Cat­e­gories) to help get you start­ed.

For more details check out the Facet Con­fig­u­ra­tion arti­cle from the offi­cial Doc­u­men­ta­tion.

Step 3  Show the Filters

To make the set­up eas­i­er, we’ve cre­at­ed a Drag & Drop inter­face with­in the List­ings → Set­tings FacetWP tab.

After cre­at­ing the facets, they will appear on the side­bar under Avail­able Facets list. You can drag them on one of the fol­low­ing areas:

  1. List­ings Archive. This area is where most of your facets should go (except the ones already shown in the Nav­i­ga­tion Bar)
  2. Nav­i­ga­tion Bar. Site-wide avail­able facets. Choose wise­ly a max­i­mum of two of the most essen­tial fil­ters — the rest of them go to the List­ings Archive sec­tion. *Note that only a lim­it­ed types of facets are suit­able for this area (eg. Search, Prox­im­i­ty, Drop­down) and you may need extra styling for oth­er types.
  3. Front Page Hero. Con­sid­er­ing that Nav­i­ga­tion Bar facets will not be shown on the Front Page, feel free to use a sim­i­lar set of fields.

VIDEO Integrating FacetWP with LISTABLE

In order to bet­ter under­stand how the FacetWP plu­g­in works with the Listable theme, we rec­om­mend the fol­low­ing video, made by Matt (the author of FacetWP plu­g­in).

That’s it! Now you should be able to fil­ter and search the list­ings using an advanced sys­tem. See a live exam­ple on a sep­a­rate demo.


1. How do I cre­ate a Loca­tion Fil­ter?

Cre­ate a Prox­im­i­ty type facet and set the Data Source to geolocation_lat.

2. How do I import FacetWP demo?

Sim­ply copy-paste this in Set­tings → FacetWP → Set­tings→ Import field.

Addi­tion­al Read­ing:

This article applies to Listable, as they share the same underlying structure.

Updated on May 31, 2017

Was this article helpful?