Dropdown
Overview
The Dropdown facet type lets users select a single value.
Available options
| Name | Description |
|---|---|
| Data source | Where the values live (taxonomy, custom field, post attribute). When choosing a hierarchical taxonomy, read this warning. |
| Default label | Set the label for the first dropdown option (default: “Any”). Note: this label is translatable with the facetwp_i18n hook. |
| Parent term | This setting is only visible if the facet’s selected Data Source is a taxonomy. If this is a hierarchical taxonomy and you want to display only child terms of a specific parent term, enter the parent’s term ID (the number only). Enter only one term ID.
Note: in a multilingual setup, setting a parent term will not work, because the parent term IDs will be different for each language. To fix this, you need to use separate facets for each language, or index the parent terms for all languages. |
| Value modifiers | Enter a list of facet values (one per line, without commas) to include or exclude. The values need to match the label (not the slug) of the facet choice exactly, including spaces and capitalization.
In hierarchical facets, if you use “Show only these values”, if you want only specific child terms to show up, you need to include their parent terms (on all levels) too. Or you need to set their parent term ID in the “Parent term” setting. If you use “Exclude these values”, you can directly exclude child terms, without excluding their parent terms. For an example, see the explanation below. If your value modifiers don’t work, see this page for more info. |
| Hierarchical | Whether to display the facet choices visually as a hierarchy, by ordering the child terms below their parent term and by indenting the child terms. This setting only appears if Data Source is set to a taxonomy, and it will only have an effect if the chosen taxonomy is actually a hierarchical taxonomy. Note: if child options don’t show up, make sure the “Count” setting is high enough. |
| Show ghosts | Show choices that would return zero results? See the explanation below. |
| Preserve ghost order | This option only appears if the Show ghosts setting is enabled. By default, ghost choices will appear at the bottom. With this setting enabled, ghost choices are kept in the same order (mixed with valid choices).
This setting is not available when the “Sort by” setting is set to “Highest count”, in which case the ghost order is ignored. |
| Sort by | Sort facet choices by:
To customize the sort order, for example switch the ASC/DESC order, or to sort numerically, you can use the facetwp_facet_orderby hook. |
| Count | The maximum number of choices to display. Default: 10. 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.
If you leave this field empty, the default of |
What are ghosts?
Ghosts are facet choices that do appear in the unfiltered results, but disappear after being filtered out. If a facet choice has no associated posts, then it will never appear.
When “Show ghosts” is enabled, after filtering, facet choices that would return zero results are still shown, but dimmed and not clickable.
By default, the ghosts will appear at the bottom of the list of choices. If you enable “Preserve ghost order“, the ghost choices will be shown in the original order (mixed with the other, valid choices), determined by the “Sort by” setting.
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:
In hierarchical facets, if you use “Show only these values”, if you want only specific child terms to show up, you need to include their parent terms (on all levels) too. Or you need to set their parent term ID in the “Parent term” setting. If you use “Exclude these values”, you can directly exclude child terms, without excluding their parent terms.
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.With the “Hierarchical” setting enabled, 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 (Dropdown facets, fSelect facets, Hierarchy Select facets, and Range List, Time Since, and Exclude facets (the last three with UI type set to “Dropdown” or “fSelect”), 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 you can select by facet name:
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 ( 'my_facet_name' == $params['facet']['name'] ) { // Replace 'my_facet_name' with the name of your facet $return = false; } return $return; }, 10, 2 );
Or by facet type:
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 ( 'dropdown' == $params['facet']['type'] ) { // Works for: 'dropdown', 'fselect', 'hierarchy_select', 'range_list', 'time_since' $return = false; } return $return; }, 10, 2 );
Hide dropdowns if one option is left
By interacting with facets, there will be situations when only one option (the ‘Any’ option) is left. With this code you can hide the dropdown when that happens:
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
<?php add_action( 'wp_footer', function() { ?> <script> (function($) { $(document).on('facetwp-loaded', function() { $('.facetwp-type-dropdown select').each(function () { if ($(this).children('option').length == 1) { $(this).closest('.facetwp-type-dropdown').hide(); } else { $(this).closest('.facetwp-type-dropdown').show(); } }); }) })(jQuery); </script> <?php } );
Style a dropdown consistently across browsers
The <select> element that the Dropdown facet uses is notoriously difficult to style consistently across browsers, but it can be done. There is a reasonable set of styles that can create a consistent and attractive <select> across newer browsers, while remaining fine in older ones too.
<select> dropdown in a facet.Add the following to your (child) theme’s functions.php (or drop the CSS in your style.css file) to re-style all facets using dropdowns in their UI. The result will look like the image on the right in all browsers.
The CSS is based on Filament Group’s select-css.
We adapted the selectors to .facetwp-facet:not(.facetwp-type-fselect) to apply the rules to all facets using <select> boxes, excluding the fSelect facet, which hides them and converts them to stylable divs of its own.
Some styles were slightly adapted to fit better in the default facet styling, like the padding, line-height, and border-radius.
To make the dropdowns expand to the full width of their container, uncomment line 13.
To change the arrow icon or its color, see the comments in line 25.
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> /* class applies to select element itself, not a wrapper element */ .facetwp-facet:not(.facetwp-type-fselect) select { /*font-size: 16px;*/ /* Uncomment to set specific font-size */ font-family: sans-serif; font-weight: normal; color: #444; line-height: 1.35; padding: .4em 1.9em .3em .65em; display: inline-block; /*width: 100%;*/ /* Uncomment for full width */ max-width: 100%; /* Useful when width is set to anything other than 100% */ box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0,0,0,.03); border-radius: .4em; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; /* Note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. For the arrow icon, if you want to change the bluecolor, change the hex color %236c8aff in the string. Be sure to use `%23` instead of `#`, since it's a URL. You can also swap in a different svg icon or an external image reference. */ background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c8aff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); background-repeat: no-repeat, repeat; /* Arrow icon position (1em from the right, 50% vertical) , then gradient position*/ background-position: right .7em top 50%, 0 0; /* Icon size, then gradient */ background-size: .55em auto, 100%; } .facetwp-facet:not(.facetwp-type-fselect) select, .facetwp-facet:not(.facetwp-type-fselect) option { cursor: pointer; } /* Hide arrow icon in IE browsers */ .facetwp-facet:not(.facetwp-type-fselect) select::-ms-expand { display: none; } /* Hover style */ .facetwp-facet:not(.facetwp-type-fselect) select:hover { border-color: #888; } /* Focus style */ .facetwp-facet:not(.facetwp-type-fselect) select:focus { border-color: #aaa; /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */ box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; } /* Set options to normal weight */ .facetwp-facet:not(.facetwp-type-fselect) select option { font-weight:normal; } /* Support for rtl text, explicit support for Arabic and Hebrew */ *[dir="rtl"] .facetwp-facet:not(.facetwp-type-fselect) select, :root:lang(ar) .facetwp-facet:not(.facetwp-type-fselect) select, :root:lang(iw) .facetwp-facet:not(.facetwp-type-fselect) select { background-position: left .7em top 50%, 0 0; padding: .6em .8em .5em 1.4em; } /* Disabled styles */ .facetwp-facet:not(.facetwp-type-fselect) select:disabled, .facetwp-facet:not(.facetwp-type-fselect) select[aria-disabled=true] { opacity: 0.4; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); cursor: auto; } .facetwp-facet:not(.facetwp-type-fselect) select:disabled:hover, .facetwp-facet:not(.facetwp-type-fselect) select[aria-disabled=true] { border-color: #aaa; } /* Hierarchy Select facets have multiple select boxes */ .facetwp-facet.facetwp-type-hierarchy_select select { margin: 0 8px 8px 0; /*display: block;*/ /* Uncomment to display the select elements under each other */ } /* Proximity facet radius dropdown */ .facetwp-facet.facetwp-type-proximity select { margin: 0 0 0 8px; } </style> <?php }, 100 );