Hierarchy Select
Filter results with guided dropdowns, one depth level at a time
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
toHierarchy 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:
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:
|
Indexing of term hierarchies

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 thefacetwp_scripts
hook. To load it on all pages, usewp_head
orwp_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 thefacetwp_scripts
hook. To load it on all pages, usewp_head
orwp_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

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