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.
How does the indexer work?
When the Re-index button is clicked, FacetWP first retrieves all post IDs that should be indexed. It uses WP_Query, and the query arguments are customizable.
FacetWP then loops through the array of post IDs. For each, it loops through all available facets and saves applicable values. Below is a pseudocode example:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
foreach ( $post_ids as $post_id ) { foreach ( $facets as $facet ) { index_values( $post_id, $facet ); } }
The facet_value column is used for permalinks, and facet_display_value is the label that users see.
The values for each row can be modified 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.