facetwp_facet_html
Overview
This filter lets you modify a facet’s HTML output of a facet’s content, excluding its container/placeholder element.
Alternative output hooks to consider
There are a few other hooks that can be used to influence the front-end facet output:
- If you want to customize the facet’s container/placeholder element, for example to add a custom class or attribute to the container, use the facetwp_shortcode_html hook instead.
- If you want to change the facet choice labels’ text output or their HTML, use the facetwp_facet_display_value hook.
- To customize the bare indexed technical and display values of the facets’ data source fields, use the facetwp_index_row hook. Or use this hook together with the facetwp_facet_display_value hook to further customize the choice output.
- To add classes to the HTML element of facet choices, you can use the facetwp_facet_choice_classes hook (available in FacetWP v4.6+).
- To add attributes to the HTML element of facet choices, you can use the facetwp_facet_choice_attributes hook (available in FacetWP v4.6+).
- To modify the render data passed to a facet’s
render()method, you can use the facetwp_facet_render_args hook.
Parameters
- $output | string | The facet HTML
- $params | array | An associative array of facet settings (see below)
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
$params = [ 'facet' => [ 'name' => 'my_facet', 'type' => 'checkboxes', 'source' => 'tax/category', // any other facet-specific settings ], 'values' => [], // available for checkbox & dropdown facets 'selected_values' => [ 100, 101 ] ];
Examples
Add a class to a facet type
The following code adds a “form-control” CSS class to all Dropdown facets:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'facetwp_facet_html', function( $output, $params ) { if ( 'dropdown' == $params['facet']['type'] ) { $output = str_replace( 'facetwp-dropdown', 'facetwp-dropdown form-control', $output ); } return $output; }, 10, 2 );
Translate facet choices
To translate a facet choice based on the currently set language, you can use this hook as follows. This example is for when you are using WPML, with the Multilingual add-on installed.
For Polylang, use lines 9-10 instead of lines 5-6.
Make sure to replace my_facet_name in line 2 with the name of your facet.
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'facetwp_facet_html', function( $output, $params ) { if ( 'my_facet_name' == $params['facet']['name'] ) { // For WPML: $current = ( !empty( FWP()->facet->http_params['lang'] ) ) ? FWP()->facet->http_params['lang'] : apply_filters( 'wpml_current_language', null ); $default = apply_filters('wpml_default_language', NULL ); // For Polylang, use these 2 lines instead of 2 above //$current = ( !empty( FWP()->facet->http_params['lang'] ) ) ? FWP()->facet->http_params['lang'] : pll_current_language(); //$default = pll_default_language(); $replace_values = []; $replace_values['nl'] = [ 'Belgium' => 'België', 'Bulgaria' => 'Bulgarije' ]; if ( $current != $default && !empty( $replace_values[$current] ) ) { $default_values = []; $new_values = []; foreach ( $replace_values[$current] AS $replace_value => $replacement ) { $default_values[] = $replace_value; $new_values[] = $replacement; } $output = str_replace( $default_values, $new_values, $output ); } } return $output; }, 10, 2 );
Alternatively, you can do the same using the facetwp_facet_display_value hook, or the facetwp_facet_render_args hook. With this last hook, you can not only directly translate (and re-order) the choices, but also change specific or all facet choice labels into __() translatable strings. These can then be translated with a translation plugin or a gettext filter.
Also see this section on the Multilingual page for more info about the recommended way to translate facet choices, which is to translate the facet’s data source itself (the custom field or taxonomy terms).