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 );