How FacetWP works

After adding some facets, you’re asked to click the Re-index button. Indexing is the process of storing facet data into a custom database table. The index table allows FacetWP to retrieve data very quickly.

Indexing

FacetWP adds one database table: facetwp_index. This table contains all the information needed to generate the facets. When the “Re-index” button is clicked, FacetWP loops through every post on your site and indexes the values for each facet.

The facet_value column is used for permalinks, and the facet_display_value column contains the label that users see. The values for each row can be modified during the indexing process using the facetwp_index_row filter.

Presentation

FacetWP uses shortcodes to let you control where on the page to display your facets, template, etc. When you use a shortcode, it creates an empty placeholder element that gets populated via JavaScript after pageload. Below is an example of what a facet shortcode outputs:

<div class="facetwp-facet facetwp-facet-make facetwp-type-checkboxes" data-name="make" data-type="checkboxes"></div>

Interaction / AJAX

When the page loads, FacetWP uses JavaScript to scan for facet elements, as well as the facetwp-template CSS class.

To see lots of useful data, type FWP into your browser console. Specifically, FWP.facets is an object containing all active facets and their selected values.

This data is sent to the server via AJAX, and the response is a JSON object containing HTML for the template and HTML for each facet, among other things.

Remember those HTML placeholder elements mentioned before? FacetWP simply injects the response HTML into the appropriate container elements.