FacetWP Filters: Convert Serialised Array to Check Boxes or Other Filters

FacetWP is a must-have plugin for WordPress which comes packed with powerful features that allow you to filter the custom fields data from your posts (and CPTs). This enables users to filter the results of a page to the criteria they select and allowing powerful search capabilities and a better user experience all round.

This is especially useful when used with WordPress plugins like Toolset or Advanced Custom Fields, where you want to display a string or value from custom fields as checkboxes, dropdowns or search boxes for the user to select as a filter to narrow the results.

But the problem comes in when various plugins store that data in different ways...

How do I display serialised data and arrays as a filter with FacetWP? While FacetWP displays custom field values from plugins such as Advanced Custom Fields which has built-in integration. Toolset is one such plugin that uses a serialised data array for its checkboxes (amongst other fields) which FacetWP does not support... At least not right out of the box, however the solution below allows FacetWP to read the serialised data array.

An example of this can be seen below where FacetWP is unable to index and display serialized data (in an array) which is created by a Toolset checkbox . Some plugins work with strings whereas others work with more complicated fields such as arrays. Some of which can cause issues.

The raw value of an array for a custom field would look like below on your database. Where "Wholesale" is the portion of it that's desired for the final frontend filter.

Example of a custom field value stored as an array in the wp_postmeta table:

a:1:{s:64:"wpcf-fields-checkboxes-option1";a:1{i:0;s:9:"Wholesale";}}

If you are using a WordPress plugin (like Toolset) that uses data arrays and you'd like FacetWP to be able to use that data; then further below is a custom code snippet which is needed for FacetWP to be able to index the data correctly and display as a filter. An example of these filters can be found on our wordpress plugins page on the left hand side under the "Filters" heading.

Create The Filter & Code Snippet

• Create a new Facet filter (or use and existing one) and copy the name, like facetwp_supplier_type as it would appear in example below. Save changes.

• Install and activate the Code Snippets plugin (this removes the need to add custom snippets to your theme’s functions.php file which can potentially cause issues or your website to crash).
• Click Snippets → "Add new" from the side menu to create a new snippet. Enter a name for the snippet then Copy-paste below to the snippet code field

The PHP code snippet below is needed to adjust how the FacetWP reads the data when it is stored as an array.

<?php

function fwp_index_serialized_field( $params, $class ) {
    if ( 'service_type' == $params['facet_name'] ) {
        $cf = (array) $params['facet_value']; // already unserialized
        foreach ( $cf as $row ) {
            foreach ( $row as $val ) {
                $params['facet_value'] = $val;
                $params['facet_display_value'] = $val;
                $class->insert( $params );
            }
        }
        return false;
    }
    return $params;
}
add_filter( 'facetwp_index_row', 'fwp_index_serialized_field', 10, 2 );

// Code snippet provided by Matt, the FacetWP plugin developer on github.

Your snippet should look like below screenshot. Remember to replace "service_type" from above with your actual facet name as found on your Settings → FacetWP page.

For this example the replaced value can be seen highlighted below, yours will be different.

Save the snippet and check "Only run in administration area" (as the indexing happens on the backend).

• Next, go to your Facet Filter's page and click Re-index so that the new data can be added to the index table.
• Copy the FacetWP filter's shortcode and add it to the page (or template) where your filters will be displayed. Save and view the results.

Multiple Facets with arrays? If there is more than one facet with a serialised array then you'll need to add the || "or" boolean operator to the if statement for each facet, like below.

if ( 'facetwp_supplier_type' || 'facetwp_another_type' == $params['facet_name'] ) {

That's it, all done. Clear the website's cache (including all CSS, JS files etc). Open your website and visit the page where the filters are located then hit Ctrl+F5 to refresh. If all went well your new filter should be displaying.