X Features Cars Demo Power Plants Demo State Parks Demo Site Showcase Docs Tutorials Add-ons Buy

Add labels above each facet

FacetWP does not automatically outputĀ facet labels. However, it’s possible to add them programmatically using a bit of custom javascript code.

function fwp_add_facet_labels() {
?>
<script>
(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-facet').each(function() {
            var $facet = $(this);
            var facet_name = $facet.attr('data-name');
            var facet_label = FWP.settings.labels[facet_name];

            if ($facet.closest('.facet-wrap').length < 1) {
                $facet.wrap('<div class="facet-wrap"></div>');
                $facet.before('<h3 class="facet-label">' + facet_label + '</h3>');
            }
        });
    });
})(jQuery);
</script>
<?php
}
add_action( 'wp_head', 'fwp_add_facet_labels', 100 );