FacetWP uses a few different JS objects to store and handle data on the front-end. They’re each described below.

Viewing the data

To view each of the following objects, type its name into the browser console:


FWP contains the bulk of FacetWP’s data and logic. It contains a mixture of functions, variables, and data objects. Much of this is covered below.

Data objects

FWP.facets; // Contains each facet's selected values
FWP.extras; // Determines which extra features to use (pager, sort, etc)
FWP.hooks; // JS hook system, based on the WP_JS_Hooks library
FWP.settings; // Facet-specific settings, as well as some global data (e.g. FWP.settings.pager)
FWP.frozen_facets; // A low-level object to force certain facet types to only re-render when needed
FWP.active_facet; // Stores information for the currently active, selected facet. Only available during facetwp-refresh event
FWP.response; //  Contains the ajax response data


FWP.refresh(); // Parses the facets and triggers an ajax refresh
FWP.reset(); // Resets all facets
FWP.fetchData(); // Triggers an AJAX refresh without re-parsing the facets
FWP.parseFacets(); // Applies any facet HTML changes to FWP.facets
FWP.setHash(); // Updates the permalink URL
FWP.loadFromHash(); // Populates facet data from URL data (happens on pageload)
FWP.buildQueryString(); // Builds and returns the URL query string (without preceding questionmark)
FWP.init(); // Initializes all FacetWP event listeners


FWP.auto_refresh = true; // Whether or not to auto-refresh when a facet choice is selected
FWP.soft_refresh = false; // This is set to true when using the Pager facet (page numbers, per page and load more), and the old sort box. Skips processing of other facets.
FWP.is_refresh = false; // This is set to true when a refresh is active
FWP.is_reset = false; // This is set to true when resetting
FWP.loaded = true; // This remains true after FacetWP initializes


FWP_HTTP contains data for the current page’s URI and its $_GET variables.

FWP_HTTP.get; // an object containing the page's $_GET variables
FWP_HTTP.uri; // the current page's URI (minus any beginning or trailing slashes)


FWP_JSON contains generally static data, such as the endpoint URL (ajaxurl) and the facet URL prefix. Here are examples of its data:

FWP_JSON.ajaxurl; // the current ajax endpoint URL
FWP_JSON.loading_animation; // the animation type, usually "fade" or "spin"
FWP_JSON.no_results_text; // the text that appears for "No results found" screens
FWP_JSON.nonce; // useful when making authenticated ajax requests
FWP_JSON.prefix; // the prefix for each facet's URL variable, usually "_" or "fwp_"


Reset facets programmatically

Besides using a Reset facet, it is also possible to reset facets programmatically:

Reset all facets:


Reset all facets with a button:

<button onclick="FWP.reset()">Reset</button>

Or with a link:

<a href="javascript:;" onclick="FWP.reset()">Reset</a>

Paste the button or link into an HTML widget, HTML block, or directly into your PHP template file.

Reset one facet:


Reset multiple facets:

FWP.reset(['make', 'model', 'year']);

Reset individual values:

FWP.reset({ 'make': 'audi' });

Set a facet value and trigger a refresh

Let’s say you want to programmatically set a facet value and trigger a refresh. Your gut might tell you to use FWP.refresh(). Since this function parses the facets, it would actually overwrite the values you’re trying to set. Here’s a better way to do it:

FWP.facets['car_brand'] = ['audi'];

Get the currently selected facet’s name or type

This example shows how to get the currently selected facet’s name or type:

add_action( 'wp_footer', function() {
document.addEventListener('facetwp-refresh', function() {
    if (null !== FWP.active_facet) {
        let facet = FWP.active_facet;
        let facet_name = facet.attr('data-name');
        let facet_type = facet.attr('data-type');
} );

See also