FacetWP a must-use plugin ( An overview)

While working on a WordPress project recently, I came across a need to filter content. I was working on a page that had a number of products. My initial thought was to group the products into different categories, add these as a list to the sidebar, and work with the archive pages to display each group of items. While this would have worked out well, the overall process would have been tedious and the user experience would have been underwhelmingly thought through. Enter FacetWP.

FacetWP is a paid WordPress plugin that allows for frontend content filtering and sorting. Yes, it does some performance improvements for gigantic data sets. Having been introduced to it a little while back I have found it to be very helpful and applicable in all scenarios where I needed to filter content on a page.

The plugin uses ajax to load filtered and sorted content without reloading the page. This removes the need for numerous archive pages and taxonomy pages to group content. 

FacetWP is very easy to use and understand. It provides a number of facet types that can be used such as

• checkboxes, 
• sliders, 
• dropdowns, 
• text fields, 
• range selectors for dates and numbers,
• plus more advanced facet addons for Maps, Time Since, Range Lists, A-Z listing, and Color filter.

The plugin can be used with all WordPress post types and taxonomies including custom ones.

Trial and Purchase of FacetWP Plugin.

The initial step for working with FacetWP is to purchase the plugin which can be done from the official FacetWP website here. 

Two plans are currently available; the basic plan that allows plugin activation of up to 3 websites and a professional plan that allows up to 20 website activations. For trial and testing purposes, a free version of the plugin with only two facets enabled is provided on request here. 

On plugin purchase, you will be able to download the plugin and will also be given a license key. 

After this, you may go ahead and upload your plugin to your website, and activate it. The plugin settings page can then be accessed under the WordPress settings in your dashboard. Go ahead and add your license key to the facets settings.

Facet setup

Before setting up your facets, it’s a good idea to have a design guide on how you would like your page to appear and which facets you may need to apply to your content.

One of the features I enjoy about FacetWP is the ability to use different facets on the same page. Let’s say I have an eCommerce site and would like to enable product filtering by price, product category, number of items, and so on. You would use a slider facet for the price filtering, checkboxes for the categories, and a number range facet for the number of items. Let’s proceed to set up our different facets.

To learn more about how each of the facets works, the official facet types page here gives well-explained details on each facet and how to use it.

In order for your created facets to work, you will have to save them and press the “Run Index” button, this will be explained more in the next section. We then copy our facet shortcode and add it to the content page which may be an archive page or the page to which the specific content needing filter is.

How does FacetWP work?

For a facet to work it has to be indexed, what this means is that the facet plugin creates rows in the custom facetwp_index database table. All the data is mapped and will be needed by the facet during filtering which enables quicker retrieval of the data during filtering. 

In the example of the price filter that we used above, when we press the “Run Index” button a row with the product id and price mapped to our price facet will be created for each of our products. On the front end during filtering, the facet would pick the products within the selected price range and these will be displayed.

FacetWP uses ajax to load the filtered content without reloading the page. This process enhances the user experience with a smooth transition on the initial page load. FacetWP adds the facetwp-template class to our contents container which is targeted and loaded with the filtered results.

To read more on this you may visit the official documentation here.

FacetWP Advanced features and customisation.

One of the things I’ve come to enjoy while working with FacetWP is the ability to customize and extend its features. Any plugin that allows for the same receives a thumbs up from me.

With all the features that FacetsWP has to offer you may wonder why customization may be needed. The downside is that customisation requires one to have programming knowledge and the application of WordPress PHP hooks and functions. In the case of FacetWP knowledge of Javascript is also needed as its features may be adjusted using their custom Javascript hooks.

While working with less complicated data like the basic WordPress posts types and taxonomies, customisation may not be needed, but given a scenario with complex metadata being used, for example, multidimensional array metadata, to supply this to the facetwp_index table, custom indexing may be needed as the default indexer may not be able to pick the correct needed date. Indexing hooks have been provided in the official documentation and how they can be used in different scenarios. One use case that might greatly benefit from the use of Facets is large Woocommerce product data sets.

The facets also come with custom styles that may not match your site layout needing additional styling and also adjusting the displayed facet content.

Need customs facets?

Another scenario I have come across recently has been the need for more facet types and facet styling options. Even with all the different facet types currently provided, a need for a different kind of facet type is inevitable as the currently provided facets may not meet different project requirements. My most resect set back was with the styles and layouts of the current date range picker facet type, I was prompted to create my own custom Date range picker as the layout did not match the UI designs of the project I was working on and did not meet the user experience when interacted with.

Thankfully using the facet class and following the documentation on custom facet types here, I was able to create a date range picker using the jquery-ui date picker, I will write more about this in my next article.

Conclusion

In my personal experience working with FacetWP has been a life changer and I would readily recommend it to anyone looking for a fast and easy way to filter posts on a WordPress website. The plugin is easy to use and understand as it provides and seamless and straightforward approach to content filtering, and the ability to customize its facets.