Advanced module
Advanced Search block
A search box with post type and taxonomy filters, and live results as you type.
Overview
Advanced Search is a search field that can search only certain content types, add filter dropdowns (for example Category and Tag), and show live results while visitors type. Pressing Enter goes to your normal WordPress search results page with the filters applied.
At a glance
- Block name
wpbb/advanced-search- Module
- Advanced
- Find it by searching
- Advanced Search
- Loads JavaScript on the site
- Yes, a small script, only on pages that use this block (it powers the live results)
When and why to use it
- Knowledge bases and documentation sites.
- Blogs with many categories.
- Header search with instant suggestions.
Example scenarios
- Help centre: search in “Docs” only, a “Topic” taxonomy dropdown, live results with 6 suggestions.
How to add the Advanced Search block
- 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 Advanced Search in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
- Insert it. Click Advanced Search in the results. The block appears with a search field with an icon button.
- 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: Search
Search in
- What it does
- Limits the search to these content types.
- What to enter or choose
- Tick the searchable post types.
- Default
- None selected
- How to use it
- Tick every option you want.
- When to use it
- To exclude pages or products.
- Example
- Posts and Docs.
- Result
- None checked searches everything visitors can search.
Let visitors pick the content type
- What it does
- Adds a content-type dropdown.
- 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
- With several types.
- Example
- On for mixed sites.
- Result
- Visitors can narrow the search.
Filter dropdowns (up to 3)
- What it does
- Adds a dropdown per taxonomy.
- What to enter or choose
- Tick up to three public taxonomies.
- Default
- None selected
- How to use it
- Tick every option you want.
- When to use it
- For large sites.
- Example
- Categories and Tags.
- Result
- Results are limited to the chosen terms.
Settings panel: Live results
Show results while typing
- What it does
- Shows suggestions under the field as visitors type (from 2 characters).
- 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
- A dropdown of matching posts.
Number of resultsShown when Live results are on
- What it does
- How many suggestions.
- What to enter or choose
- A number from 1 to 10.
- Default
- 6
- How to use it
- Drag the slider, or type a number in the box next to it.
- When to use it
- Always optional.
- Example
- 6.
- Result
- More or fewer suggestions.
ThumbnailsShown when Live results are on
- What it does
- Shows featured images in suggestions.
- 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
- Visual content.
- Example
- On.
- Result
- Small images beside results.
Settings panel: Appearance
Placeholder
- What it does
- Hint inside the field.
- What to enter or choose
- Text, or empty for “Search…”.
- Default
- Empty
- How to use it
- Type into the text field. Changes appear in the preview right away.
- When to use it
- Optional.
- Example
- “Search the help centre…”.
- Result
- Shown in the empty field.
Button
- What it does
- Icon or text button.
- What to enter or choose
- One of: Icon, Text.
- Default
- Icon
- How to use it
- Open the dropdown and pick an option.
- When to use it
- Always optional.
- Example
- Icon.
- Result
- The button changes.
Button text
- What it does
- The text of a Text button (or the accessible name of the icon button).
- What to enter or choose
- Text, or empty for “Search”.
- Default
- Empty
- How to use it
- Type into the text field. Changes appear in the preview right away.
- When to use it
- Optional.
- Example
- “Find”.
- Result
- —
Shape
- What it does
- Corner style.
- What to enter or choose
- One of: Rounded, Pill, Square.
- Default
- Rounded
- How to use it
- Open the dropdown and pick an option.
- When to use it
- Match your buttons.
- Example
- Pill.
- Result
- The field changes shape.
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 Advanced Search offers.
Element: Field selected first
The field. Focus state (while typing).
| 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, Focus | |
| Colors | Text | — | Normal, Focus |
| Background | Type | — | Normal, Focus |
| Color / Gradient | — | Normal, Focus | |
| Image | — | Normal | |
| Border | Border type | — | Normal, Focus |
| Border | — | Normal, Focus | |
| Radius | Yes | Normal | |
| Focus indicator | — | Focus | |
| Box Shadow | Remove shadow | — | Normal, Focus |
| Shadow layers | — | Normal, Focus | |
| 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, Focus |
States for this part:
- Focus — While the visitor is typing in it (the field inside has keyboard focus).
Element: Block
The wrapper.
| 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 |
| Shadow layers | — | Normal | |
| Spacing | Margin | Yes | Normal |
| 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: Button
The button. Hover and Focus.
| 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, Focus | |
| Colors | Text | — | Normal, Hover, Focus |
| Background | Type | — | Normal, Hover, Focus |
| Color / Gradient | — | Normal, Hover, Focus | |
| Image | — | Normal | |
| Border | Border type | — | Normal, Hover, Focus |
| Border | — | Normal, Hover, Focus | |
| Radius | Yes | Normal | |
| Focus indicator | — | Focus | |
| Box Shadow | Remove shadow | — | Normal, Hover, Focus |
| Shadow layers | — | Normal, Hover, Focus | |
| 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, Focus |
States for this part:
- Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
- Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.
Element: Live results
The live results dropdown.
| 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 |
| Shadow layers | — | Normal | |
| 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 |
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#pricingat 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,langordirattributes. 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
A normal search form (works without JavaScript). Live results come from a public, read-only REST endpoint that returns only what the site’s own search shows visitors: published, non-password-protected posts of public, searchable post types.
Accessibility
- Live results follow the combobox pattern: ↓/↑ move through suggestions, Enter opens one, Esc closes the list.
- The number of results is announced to screen readers.
Limitations and notes
- Up to three filter dropdowns and 10 live results.
- Live results start from 2 characters.