SlowlyFilter
Let visitors filter a custom query by your chosen criteria.
The Filter block lets visitors narrow a query on the page, by category, taxonomy, attribute, a search term, or a range slider. The visitor picks a value, and the results update without a page reload.
You build a filter, point it at a query, and place your controls inside it. The controls are ordinary blocks, so their appearance comes from the design panel.
Adding one
- Select the section or container that will hold the filter.
- Open the inserter and search "filter".
- Pick the Filter block.
Once placed, open the filter's settings panel to choose what it filters by and which query it targets.
Settings
In the filter's own panel. The shared design tab (layout, spacing, type, colour, borders, effects) is described at Styling.
| Setting | What it does | Reach for it when |
|---|---|---|
| Type | What kind of filter this is: taxonomy, attribute, search, or range | Set this first; it determines which other controls appear |
| Source | Where the filter options come from: dynamic (from the query's post type) or static (a fixed list you define) | Static when options are known in advance and unlikely to change |
| Data type | The specific taxonomy or attribute field to filter by, such as category or tag | Type is set to taxonomy or attribute |
| Target query | Which query on the page this filter controls, identified by its query ID | You have more than one query on the page, or the filter sits outside its query's container |
| Count items | Shows how many results each option would return, next to its label | Helping visitors gauge which options have content before they click |
| Placeholder | Text shown in the filter control before a value is chosen | The control is a select or search input |
| Show in selection | Whether a chosen option appears as a visible "active filter" tag | Letting visitors see and clear what they have picked |
| Selection prefix | Text before the option label in the active-filter tag | Adding context like "Category:" before the chosen value |
| Selection suffix | Text after the option label in the active-filter tag | Adding a unit or clarifying label after the value |
| Parent | Restrict options to children of a specific term | Filtering a nested taxonomy such as product sub-categories |
| Include | Limit which terms appear as options | Showing only a subset of a taxonomy |
| Exclude | Remove specific terms from the option list | Hiding a term like "Uncategorised" that is not useful to visitors |
| Hide childless | Omit terms that have no child terms | Filtering a hierarchical taxonomy where parent terms act as headings only |
| Hide empty | Omit terms that have no posts matching the current query | Keeping the list to options that will return results |
| Order by | How options are sorted: name, count, ID, or term order | The default alphabetical sort is not right for the content |
| Order | Ascending or descending | Reversing a count sort to show most-used options first |
| Dynamic defaults | Pre-selected values applied when the page loads | Arriving with a filter already active, for a filtered landing page |
Styling
The filter wrapper and everything inside it use the shared design panel. Style each child control block separately to set its own colours, spacing, and type. The states panel is where to style active and selected states on filter options.
Accessibility
Each filter control needs a visible label or an accessible name so keyboard and screen-reader users know what they are changing. If the control is a select or checkbox group, associate a label element with it. Avoid filter options that are icon-only with no text equivalent. When results update after a filter change, the query region should carry an appropriate live-region role so assistive technology announces the new count to users who cannot see the page refresh.