Hierarchy Select

This add-on lets you create guided dropdowns based on a hierarchical taxonomy.

Adding the facet

• Create a new facet, and set the Facet type to Hierarchy select.
• Click the “Add label” button once for each depth level. If you want to show two dropdowns, then you need two labels.
• Add the facet to your listing page(s).

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: WooCommerce product categories/attributes order (the drag/drop order) Category Order and Taxonomy Terms Order Advanced Taxonomy Terms Order Intuitive Custom Post Order (which needs some additional code to work) Custom Taxonomy Order (which needs some additional code to work) 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

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, add the following snippet 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_head', function() {
  ?>
  <style>
    .facetwp-hierarchy_select.is-disabled {
      display: none;
    }
  </style>
  <?php
}, 100 );

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 is possibly confusing 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.

Add the following snippet to your (child) theme’s functions.php hide to these empty dropdowns:

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_head', function() {
  ?>
  <style>
    .facetwp-hierarchy_select.is-empty {
      display: none;
    }
  </style>
  <?php
}, 100 );

Add headings above each dropdown

To add headings above each dropdown, add the following snippet to your (child) theme’s functions.php.

The code adds a <h3> heading before each <select> dropdown element. The text in the heading is fetched from that dropdown’s depth label, as entered in the settings.

Make sure to replace my_hierarchy_select_facet with the name of your Hierarchy Select 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_hierarchy_select_facet' == $params['facet']['name'] ) { // Replace 'my_hierarchy_select_facet' with the name of your Hierarchy Select facet.
    $selects = explode( '<select', $output );
    $headers = $params['facet']['levels'];
    $output = '';

    if ( empty( $selects[0] ) ) {
      array_shift( $selects );
    }

    foreach ( $selects as $index => $select ) {
      $header_html = isset( $headers[ $index ] ) ? '<h3>' . $headers[ $index ] . '</h3>' : '';
      $output .= $header_html . '<select' . $select;
    }

  }

  return $output;
}, 10, 2 );

If you need the heading texts to be different from the depth labels, you’ll need to create the $headings array in line 6 manually, with as many labels as there are dropdowns:

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_hierarchy_select_facet' == $params['facet']['name'] ) { // Replace 'my_hierarchy_select_facet' with the name of your Hierarchy Select facet.
    $selects = explode( '<select', $output );

    $headers = [ 'Header one', 'Header two', 'Header three' ]; // Create an array with as many heading texts as there are dropdowns.
    $output = '';

    if ( empty( $selects[0] ) ) {
      array_shift( $selects );
    }

    foreach ( $selects as $index => $select ) {
      $header_html = isset( $headers[ $index ] ) ? '<h3>' . $headers[ $index ] . '</h3>' : '';
      $output .= $header_html . '<select' . $select;
    }

  }

  return $output;
}, 10, 2 );

Next, if you are hiding disabled dropdowns, and/or empty dropdowns, their <h3> headings will need to be automatically hidden too. To accomplish this, add the following snippet to your (child) theme’s functions.php, and adapt the classes in line 7 as needed: only include classes for which you are hiding the dropdowns:

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( 'facetwp_scripts', function() {
  ?>
  <script>
    (function($) {
      document.addEventListener('facetwp-loaded', function() {
        $('.facetwp-facet-my_hierarchy_select_facet > h3').each(function() { // Replace 'my_hierarchy_select_facet' with the name of your Hierarchy Select facet.
          if ($(this).next('select').is('.is-disabled, .is-empty')) { // Adapt the classes as needed: only include classes for which the dropdowns are hidden.
            $(this).addClass('facetwp-hidden');
          }
        });
      });
    })(fUtil);
  </script>
  <?php
}, 100 );

Use fSelect dropdowns in Hierarchy Select facets

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

See also

• The Hierarchy facet type
• The fSelect facet type
• Using the facetwp_i18n hook to translate facet labels and strings
• The facetwp_facet_orderby hook
• The facetwp_facet_html hook