How to Create a Letter Slider
In this tutorial, we will customize the Slider facet type to display letter labels.
How it works
The code below assumes a facet named letter_slider
with a text field (e.g. Post Title) as the Data Source.
The first hook takes each field value, indexing the first letter’s ASCII decimal value (A=65, B=66, etc). This is because the slider facet expects numbers.
In the other hook, we use the facetwp/set_label/slider
JS hook to swap each numerical label with its letter equivalent.
The code
<?php function fwp_slider_alpha_to_number( $params ) { if ( 'letter_slider' == $params['facet_name'] ) { $first_letter = $params['facet_display_value']; $first_letter = strtoupper( substr( $first_letter, 0, 1 ) ); // get ASCII number (A=65, Z=90) $params['facet_value'] = ord( $first_letter ); $params['facet_display_value'] = ord( $first_letter ); } return $params; } add_filter( 'facetwp_index_row', 'fwp_slider_alpha_to_number' ); function fwp_slider_set_label() { ?> <script> (function($) { $(function() { FWP.hooks.addAction('facetwp/set_label/slider', function($this) { var facet_name = $this.attr('data-name'); var min = FWP.settings[facet_name]['lower']; var max = FWP.settings[facet_name]['upper']; var min_alpha = String.fromCharCode(parseInt(min)); var max_alpha = String.fromCharCode(parseInt(max)); var label = (min === max) ? min_alpha : min_alpha + ' — ' + max_alpha; $this.find('.facetwp-slider-label').html(label); }); }); })(jQuery); </script> <?php } add_action( 'wp_head', 'fwp_slider_set_label', 999 );