Advanced module

Taxonomy Filter block

Categories, tags or any taxonomy as chips, a list or a dropdown — linking to their archives and highlighting the current one.

Overview

Taxonomy Filter shows the terms of a taxonomy (Categories, Tags, product categories, custom taxonomies) as navigation: chips, a list or a dropdown. Each links to its archive page, and the term being viewed is highlighted — ideal above a blog archive.

At a glance

Block name: wpbb/taxonomy-filter
Module: Advanced
Find it by searching: Taxonomy Filter
Loads JavaScript on the site: Yes, a tiny script, only on pages that use this block (it only acts on the Dropdown display)

When and why to use it

Category navigation on blog and archive templates.
Tag clouds.
Compact category dropdowns in sidebars.

Example scenarios

Blog archive template: Categories as chips with an “All” link, current category highlighted.

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Taxonomy Filter in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Taxonomy Filter in the results. The block appears with your categories as chips.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

Settings panel: Terms

Taxonomy

What it does: Which terms to show.
What to enter or choose: Any public taxonomy.
Default: category
How to use it: Open the dropdown and pick an option.
When to use it: Always.
Example: Tags.
Result: The preview updates.

Only these terms (optional)

What it does: Shows only the terms you pick.
What to enter or choose: Terms, or empty for automatic.
Default: None selected
How to use it: Start typing a name and pick it from the suggestions. Add several if needed; remove one with its ×.
When to use it: Curated navigation.
Example: Three main categories.
Result: The automatic options below are hidden when terms are picked.

Top level onlyShown when no terms are picked and the taxonomy is hierarchical

What it does: Leaves out child terms.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Deep category trees.
Example: On.
Result: Only top-level terms.

Order byShown when no terms are picked

What it does: Sort order.
What to enter or choose: One of: Name, Most used.
Default: Name
How to use it: Open the dropdown and pick an option.
When to use it: Always optional.
Example: Most used.
Result: The order changes.

Maximum numberShown when no terms are picked

What it does: How many terms.
What to enter or choose: A number from 1 to 100.
Default: 20
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always optional.
Example: 10.
Result: More or fewer terms.

Hide empty terms

What it does: Leaves out terms without posts.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually.
Example: On.
Result: No dead links.

Settings panel: Display

Show as

What it does: The display style.
What to enter or choose: One of: Chips, List, Dropdown.
Default: Chips
How to use it: Click one of the buttons in the group.
When to use it: Chips above archives; List in sidebars; Dropdown for many terms.
Example: Dropdown in a sidebar.
Result: The dropdown goes to the chosen archive immediately (a “Go” button is used without JavaScript).

Label (optional)

What it does: A heading-like label before the terms.
What to enter or choose: Text, or empty.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “Topics”.
Result: Shown before the terms.

Post counts

What it does: Shows the number of posts per term.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Optional.
Example: On.
Result: Counts beside names.

“All” link

What it does: Adds a first item linking to all posts.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Above archives.
Example: On.
Result: Links to the blog page or the post type archive.

“All” textShown when “All” link is on

What it does: The “All” link text.
What to enter or choose: Text, or empty for “All”.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “Everything”.
Result: —

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Taxonomy Filter offers.

Element: Items selected first

Each term link. Hover and Active (the term being viewed).

Styles-tab controls for “Items”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Active
Colors	Text	—	Normal, Hover, Active
Background	Type	—	Normal, Hover, Active
	Color / Gradient	—	Normal, Hover, Active
	Image	—	Normal
Border	Border type	—	Normal, Hover, Active
	Border	—	Normal, Hover, Active
	Radius	Yes	Normal
	Focus indicator	—	—
Box Shadow	Remove shadow	—	Normal, Hover, Active
Box Shadow	Shadow layers	—	Normal, Hover, Active
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Active

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Active — Applies to the term whose archive is being viewed.

Element: Block

The wrapper.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Counts

The counts.

Styles-tab controls for “Counts”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Margin, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

Plain links (chips and list) or a GET form (dropdown) — all work without JavaScript. A tiny script only makes the dropdown go immediately.

Accessibility

The current term is marked with aria-current.
The dropdown has a label for screen readers.

Overview

At a glance

When and why to use it

Example scenarios

How to add the Taxonomy Filter block

Content settings

Settings panel: Terms

Taxonomy

Only these terms (optional)

Top level onlyShown when no terms are picked and the taxonomy is hierarchical

Order byShown when no terms are picked

Maximum numberShown when no terms are picked

Hide empty terms

Settings panel: Display

Show as

Label (optional)

Post counts

“All” link

“All” textShown when “All” link is on

Design & styling

Element: Items selected first

Element: Block

Element: Counts

Responsive settings

Advanced options

How it works on your site

Accessibility