FacetWP Hierarchy Select facetThis add-on lets you create guided dropdowns based on a hierarchical taxonomy.

Adding the facet

Available options

Name Description
Data Source The taxonomy to pull values from. The Hierarchy Select facet expects a hierarchical taxonomy as data source.
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.
Show depth levels Set custom dropdown labels, and determine which dropdown level appears. Default label: “Any”. Click the “Add Label” button to add (labels for) more levels. Notes:

  • Setting a depth label for a level determines if the dropdown for that level appears. By default, the facet shows only one level. If your taxonomy for example has three levels, and you want them all to appear, you need to set three depth labels.
  • The depth labels are translatable with the facetwp_i18n hook.

Indexing of term hierarchies

Checkboxes facet Hierarchical setting enabled

Hierarchy Select 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 counts from all facets of a type that use a dropdown UI (all Hierarchy Select facets facets, Dropdown facets, and fSelect facets, and Range List facets (in dropdown or fSelect UI mode)), add the following to your theme’s functions.php:

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_dropdown_show_counts', '__return_false' );

If you want to hide counts from specific facets with a dropdown UI, then use this instead:

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_dropdown_show_counts', function( $return, $params ) {
  if ( 'your_facet_name' == $params['facet']['name'] ) {
    $return = false;
  }
  return $return;
}, 10, 2 );

Hide disabled child dropdowns

Child dropdowns in the facet’s hierarchy will have the class is-disabled as long as their parent dropdown does not have a choice selected yet. If you want to hide these “disabled” dropdowns until they become populated, you can use this 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-hierarchy_select.is-disabled {
  display: none;
}

Hide empty child dropdowns

Child dropdowns in the hierarchy will have the class is-empty if their parent choice causes them to have no options. This situation can happen in hierarchies where some parent terms have more child levels than other parent terms.

By default, the Hierarchy Select facet will always show all levels of the taxonomy, also if you select a parent choice that has fewer levels than others. This could cause confusion for users, especially if you have named the depth labels according to the levels’ content and there are no options in a level’s dropdown. With this CSS you can hide these empty dropdowns:

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-hierarchy_select.is-empty {
  display: none;
}

Use fSelect dropdowns in Hierarchy Select facets

Using fSelect dropdowns in the Hierarchy Select facet
Using fSelect dropdowns in a Hierarchy Select facet

It is possible to use fSelect type dropdowns instead of the normal default dropdowns in the Hierarchy Select facet. You can see this in action in the “Categories” facet of the Recipes Demo.

Note that the fSelect dropdown will be in single-select mode (so without checkboxes). Multi-select does not make sense when using Hierarchy Select facets because they are used to “drill down” by parent-child relationships of the hierarchical taxonomy terms.

To use fSelect type dropdowns in your Hierarchy Select facets, add the following code to your (child) theme’s functions.php:

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_action( 'wp_footer', function() {
  ?>
  <link href="/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.css" rel="stylesheet" type="text/css">
  <script src="/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.js"></script>
  <script>
    document.addEventListener('facetwp-loaded', function() {
      fUtil('.facetwp-hierarchy_select.is-disabled').addClass('fs-hidden');
      fUtil('.facetwp-hierarchy_select:not(.fs-hidden').fSelect();
    });
  </script>
  <?php
}, 100 );

Note: If you already have an actual fSelect facet on the page, you don’t need to include the links to the fSelect CSS and JavaScript files.

Changelog

0.5.3

  • Improved changed setting label to "Show depth levels"
  • Fixed PHP "undefined index" warnings

0.5.2

  • Improved admin UI tooltip for the "Depth labels" setting
  • Improved force the "Depth labels" setting to contain at least 1 label

0.5.1

  • New added `is-empty` CSS class to empty dropdowns

0.5

  • Improved better / more efficient handling of hierarchies
  • Fixed admin label boxes lost focus on input

0.4.4

  • Fixed hierarchy-related issue with FacetWP 4.0
  • Fixed after updating, try editing each Hierarchy Select facet, hit Save changes, then Re-index.

0.4.3

  • Improved removed jQuery dependency

0.4.2

  • New added "Term order" ordering support

See also