Radio
Overview
The radio facet type generates a single-select list of choices.
Available options
Name | Description |
---|---|
Data source | Where the values live (taxonomy, custom field, post attribute) |
Default label | Set a label to include an “Any” choice above the other radio buttons. The label is optional: leave it blank to remove the “Any” option. Note: this label is translatable with the facetwp_i18n hook. |
Parent term | If the facet’s Data source is a hierarchical taxonomy and you want to display only child terms of a specific parent, enter the parent’s term ID. Use only one term ID. (Note: don’t use this in a multilingual setup, because the parent term IDs will be different for each language). |
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. |
Show ghosts | Show choices that would return zero results? See the explanation below. |
Preserve ghost order | Keep ghost choices in the same order (mixed with valid choices)? By default, ghost choices will appear at the bottom. |
Sort by | Sort facet choices by:
For custom ways of sorting, for example numerically, you can use the facetwp_facet_orderby hook. |
Count | The maximum number of choices to display. 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:
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 “Keep ghost order”, the ghost choices will be shown in the original order (mixed with the other, valid choices), determined by the “Sort by” setting.
Hide counts
To hide the counts for all facets of type Radio, Checkboxes, Hierarchy, 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 thefacetwp_scripts
hook. To load it on all pages, usewp_head
orwp_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 thefacetwp_scripts
hook. To load it on all pages, usewp_head
orwp_footer
. Or you can use a code snippets plugin. More info/* Hide counts in all facets with a radio UI (Radio facet, Range List facet in UI modes "None" or "Radio" */ .facetwp-radio .facetwp-counter { display: none; } /* Hide counts in all Radio facets */ [data-type="radio"] .facetwp-counter { display: none; } /* Hide counts in a specific Radio facet */ .facetwp-facet-yourfacetname .facetwp-counter { display: none; }
Hide the “Any” option
If you want to hide the “Any” option when there are no other options left, you can use this example code to (in general) hide any facet that has no options left. This code will also hide Radio facets with only the “Any” option left. Just make sure you also disable the “Show ghosts” setting.
Style Radio facet choices as buttons
Radio facets are easy to style. Just like in for example Checkboxes facets, the icons are not real HTML (<input type="radio">
) form elements, but a simple CSS background image applied to a <div>
. This background image can be replaced (or removed) with a few lines of CSS.

The following example CSS styles all Radio facet choices as buttons. It also applies a background- and border-color on hover and when the choice is selected:
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-radio { background: none; display: inline-block; line-height: 1em; padding: 10px 12px; /* top/bottom right/left */ margin: 0 8px 8px 0; /* top right bottom left */ border: 1px solid #ddd; border-radius: 3px; } /* Style the hover and 'checked' states */ .facetwp-radio:hover, .facetwp-radio.checked { background-image: none; background-color: #4f9fdd; border-color: #4f9fdd; color: #ffffff; }