Overview

FacetWP Hierarchy facetThe hierarchy facet type lets users navigate through a hierarchical taxonomy.

Available options

Name Description
Data source Where to pull values from. Note that the Hierarchy facet requires a taxonomy to function properly.
Default label Set the label for the top-level option (default: “Any”). This label is translatable with the facetwp_i18n hook. The left arrow icon before the label (‹) can be customized or removed with a hook.
Value modifiers Enter a list of values (one per line, without commas) to include or exclude from the facet’s choices. The values need to match the label (not the slug) of the value exactly, including spaces and capitalization. See the explanation below. If they don’t work, see this page for more info.
Sort by Sort facet choices by:

  • Highest count – sorts by the total number of results with that value.
  • Display value – sorts alphabetically according to the label you see on the facet choices.
  • Raw value – sorts by the value that tracks the facet choices. For example in a dropdown, this is the option value rather than the option label. You can see the raw values in the url after making facet selections.
  • Term order – sorts by taxonomy term order. This option uses term_order which is only available when using a plugin that sets an explicit order for taxonomy terms. FacetWP supports:

    For term_order to work with these plugins, make sure to use an actual taxonomy as the facet’s data source, not an ACF field set to a taxonomy.

For custom ways of sorting, for example numerically, you can use the facetwp_facet_orderby hook.
Count The maximum number of choices to display. Be aware that if your Data source is a hierarchical taxonomy, the count includes the child terms/categories. If the count is too low, (some) child options will not show up.

Use -1 for no limit. However, note that FacetWP limits the maximum count at 1000 for usability and performance reasons. If you need that many choices, consider using a Search facet or Autocomplete facet instead.

What are value modifiers?

Value modifiers let you include or exclude certain choices from displaying. This setting requires a re-index to take effect.

Below are some examples:

Checkboxes facet with value modifiers

Indexing of term hierarchies

Checkboxes facet Hierarchical setting enabled

Hierarchy facet with three levels
Posts with only the Paris term selected in the back-end will be displayed in the front-end results if you select “Europe” or “France” in the facet.

FacetWP automatically indexes both explicit and implicit term hierarchies.

If your taxonomy includes Europe > France and a post has only the France term selected, then Europe will get indexed too for that post.

On the front-end this means that if you have a post that has only the Paris term selected, but not its parent terms (France or Europe), the post will still be displayed in the results if you filter by “Europe”, or “France” in the facet.

Hide counts

To hide the counts for all facets of type Hierarchy, Checkboxes, Radio, and Range List (in UI modes “None”, “Radio” or “Checkboxes”), add this CSS into your theme’s style.css:

How to use custom CSS?
CSS code can be placed in your (child) theme's style.css file. Alternatively, you can add it manually between <style> tags in the <head> section, in your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer.  Or you can use a code snippets plugin. More info
.facetwp-counter {
  display: none;
}

If you need to be specific about which (type of) facet to hide the counts for, use any of the following styles:

How to use custom CSS?
CSS code can be placed in your (child) theme's style.css file. Alternatively, you can add it manually between <style> tags in the <head> section, in your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer.  Or you can use a code snippets plugin. More info
/* Hide counts in all Hierarchy facets */
.facetwp-type-hierarchy .facetwp-counter {
  display: none;
}

/* Hide counts in a specific Hierarchy facet */
.facetwp-facet-yourfacetname .facetwp-counter {
  display: none;
}

Customize or remove the “Any” arrow icon

The “Any” label (which can be changed with the Default label setting) automatically adds a left arrow icon ‹ (and a space) before it, with its character encoding: '&#8249; '.

To replace this icon with something else (like another encoded icon, a normal character, or a (HTML) string) you can use the following hook:

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_hierarchy_arrow', function( $arrow ) {
  $arrow = '&times; '; // Replaces the left arrow with an 'x' icon and a space after it.
  return $arrow;
});

To remove the arrow completely, just pass an empty string:

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_hierarchy_arrow', function( $arrow ) {
  $arrow = '';
  return $arrow;
});

See also