Search Bar is a row of dropdowns with a search button, like the ones you see on hotel, property and shop home pages. Visitors pick their options, press the button and land on a results page that is already filtered. Options can come from a taxonomy, a custom field or a list you type in.
Each bar below is live. Choose an option and search to see the filtered results page on this site.
Build the bar on your home page, then let your results page do the rest.
Drop Search Bar onto your page and add a dropdown for each filter. Choose a taxonomy, a custom field or type your own options.
Leave Results Page URL empty to use the WordPress search results page, or enter the URL of a page with a post loop or product grid.
Set the bar, dropdown and button colours, padding and corners, and choose the width below which it stacks on mobile.
A simple bar on the front end, with flexible sources behind it.
List the terms of any taxonomy, such as categories, product categories or a custom taxonomy, with child terms indented under their parents.
List every distinct value saved in a custom field, for example a location or property type field.
Type your own labels and values, so the dropdown can say Dogs while the URL uses dog-food.
Add as many dropdowns as you need. Each one adds its own filter to the results URL.
Sort terms by name or count, ascending or descending, hide empty terms, or show only the children of one parent term.
Selections are sent as _pf_ URL parameters, the same format Phox Facets uses, so filters on the results page pick them up.
Send visitors to the standard search results page or to any page you choose.
When the results page also contains the bar, the dropdowns show the options the visitor picked.
The bar stacks vertically on small screens. Set your own breakpoint for when it stacks.
Anywhere visitors want to narrow down a list before they start browsing.
Location, property type and bedrooms, like the search on an estate agent home page.
Let guests choose a destination and a type of stay.
Send shoppers straight to a filtered category from the home page.
Filter listings by area and service before showing results.
Help visitors choose a care type, location or service level.
Jump to articles on a chosen topic.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Filters (one row per dropdown) | ||
| Facet Name | Internal name for the dropdown. Used in the URL for manual options. | category |
| Placeholder | The first option, shown when nothing is selected. | Care Type |
| Data Source | Taxonomy, Custom Field or Manual Options. | Taxonomy |
| Taxonomy | Which taxonomy to list terms from. | category |
| Meta Key | The custom field to read values from (Custom Field source). | — |
| Options | Label and value pairs (Manual Options source). | — |
| Hide Empty Terms | Leave out terms with no posts (Taxonomy source). | Off |
| Parent Term (optional) | Only list the children of this term slug (Taxonomy source). | — |
| Order By | Name or Count (Taxonomy source). | Name |
| Order | Ascending or Descending. | Ascending |
| URL Parameter | Override the parameter name used in the results URL. | — |
| Button | ||
| Button Text | Text on the search button. Leave empty for an icon-only button. | Search |
| Show Search Icon | Show a magnifying glass icon on the button. | On |
| Results Page URL | Page to send visitors to. Empty uses the WordPress search results page. | — |
| Design | ||
| Bar | Background, padding, gap, borders and border radius of the bar. | Dark slate, 6px, 8px radius |
| Layout | Width, max width and alignment. Responsive. | — |
| Dropdowns | Min width, height, padding, background, border colour, width and radius, typography, arrow colour, and the open list background and text colour. | — |
| Button | Background, hover background, text colour, padding, border radius, min width and typography. | Gold #c8a254 |
| Mobile | Stack Below (px): the screen width at which the bar stacks vertically. | 768px (built in) |
| Spacing | Top and bottom margin. | — |
No. Search Bar is built from dropdowns only, so visitors choose from options you control. Use it alongside a normal search form if you also need keyword search.
The form sends the selected options to the results page as URL parameters starting with _pf_, for example ?_pf_product_cat=dog-food. The query on the results page is filtered to match.
Not for the standard search results page. Taxonomy and custom field dropdowns register their filters so it can read them, as the demos above show. On a custom results page, use a post loop that Phox Facets can filter and it picks up the same _pf_ parameters.
Yes. Enter its URL in Results Page URL. Leave it empty to use the standard WordPress search results page.
Each option has a label and a value. The label is what visitors see and the value is sent in the URL. The URL parameter comes from the Facet Name, or from URL Parameter if you set one. To filter by a taxonomy, use its slug as the name (for example product_cat) and term slugs as the values, as in the Shop by pet demo.
Search Bar is included with Phox Elements, along with 150+ other premium elements for Breakdance.