A polished, Airbnb-style search bar you can drop anywhere on your site (homepage hero, landing pages, headers) so guests can start a stay search with a single, familiar control.
What it does #
Searchbar Pro gives your site a modern, multi-stage search bar that walks guests through the four questions that start every booking:
- Where they want to go (with destination autocomplete pulled from your own locations and cities, plus an optional Nearby option that jumps a guest straight to the closest destination using their own location). The dropdown lists every destination that matches what a guest types, and the suggested list shows all of your curated zones, so nothing is hidden on sites with many destinations. Long lists simply scroll.
- When they want to stay (a date picker)
- Who is coming (separate Adults, Children, Infants, and Pets counters)
- What they are looking for (an optional describe-or-filter step, including a natural-language box that can hand off to AI Concierge if you have it, and an optional “By name” tab for guests who already know which property they want)
On desktop it can sit as a sticky pill that stays handy as guests scroll. On phones it opens a clean full-screen modal so each step is easy to tap through. In that modal, the date step is one scrolling column of months that runs all the way to the end of your booking window (up to 24 months ahead), so a guest can always scroll to the last dates they can book. When a guest hits Search, they land on your property results page with their selections already applied. Typing a valid destination and hitting Search or Enter works the same as tapping a suggestion from the dropdown, so a guest who types the whole name and submits without clicking still gets the right results.
The bar also works on the results page itself. When your property results page shows the built-in filter bar, Searchbar Pro takes it over automatically: guests adjust their destination, dates, or party and the property grid and map update in place, without a page reload. As they scroll, the bar sticks to the top of the results so refining is always one tap away. Property pricing on that grid keeps matching whatever dates the bar has selected, exact or flexible, so cards never fall back to a generic “Starting at” price while a guest has real dates chosen.
By default the bar guides guests from field to field: picking a destination opens the date picker, and completing a date range opens the guest picker. On the results-page bar, tapping Done in the guest picker chains onward too, either to your promoted filter segment if you have one turned on, or to the What step. You can turn this off if you would rather each field simply close after a choice. The guest picker’s clear (“X”) button also only appears once a guest actually changes a count, so it stays out of the way at the default of one adult. The field a guest is actively working in grows a little wider at its neighbors’ expense while they are choosing, so it never feels cramped.
If you run AI Concierge, the What step’s describe box can also carry a concierge typing placeholder: the ghost text cycles through a few short example asks (“a place with a private pool,” “pet-friendly near the water”) before settling back on the static “Describe or filter” copy, and the What popover gains a small “Ask our concierge” branding header. Because it is only a hint, nothing about it changes what a guest can type or how a search runs.
If you turn on Live result count, the Search button itself updates as a guest edits their search, reading “Search 12 homes” instead of a plain “Search,” so they know how many properties match before they even submit. A separate Results count line setting adds a matching count line (“12 homes”) above the property grid on the results page that updates with every refine, and another adds a sort dropdown next to that count line so guests can reorder the grid (Featured, Newest First, Price: Low to High, and so on) without opening the Filter panel.
It is built to feel like the big-brand booking sites guests already know, which lowers hesitation and gets them into results faster. You can also match it to your own brand: one accent color setting recolors the Search button, focus highlights, price histogram, and date picker in one move. If bedroom count is the filter your guests reach for first, you can also promote it into its own segment in the bar itself, between Who and What, so they never have to open the Filter panel just to set it.
By default each field carries a small label above its value (Where, When, Who, What). If you would rather have a slimmer bar, set Hero bar layout to Compact. The labels go away, the empty fields show short hints instead (“Destination,” “Dates,” “Guests”), and on desktop the What field becomes a small icon-only Filters button. While a filter is applied, a small clear badge in your accent color sits on that icon, so guests can see a filter is active and remove it in one tap. Compact applies to every search bar on your site, hero bars and the results-page refine bar alike. The phone search flow looks the same as before.
If you also run Flexible Search, the When step grows an Exact dates / I’m flexible toggle. A guest without fixed plans can switch to Flexible and pick a stay length (Weekend, 1 week, 2 weeks, 1 month) and a time frame (Anytime, or a specific month) instead of exact dates, then tap a suggested date range to lock in something concrete. The same suggested-dates strip also appears under the bar once a flexible search is active. This only appears when both modules are switched on, and it uses the stay-length and months-ahead choices you already set on the Flexible Search settings screen, so there is nothing extra to configure here.
If your theme has its own sticky navigation bar, Searchbar Pro’s sticky pill can sit right below it instead of underneath it, so the two never overlap.
Guests see the bar in their own language on Dutch and German sites. Searchbar Pro ships Dutch and German wording for everything a guest reads in the bar, including the date picker, the guest counters, and the buttons. It applies to any Dutch or German site language, so Belgian Dutch and Austrian or Swiss German are covered too. If your site already has its own translation for a line (from WPML String Translation, Loco Translate, or a language pack), your wording wins and the shipped text is never used. Other languages stay in English unless you translate them.
How to turn it on #
1. Enable the module #
Go to the HomeRunner Toolkit Hub and switch on Searchbar Pro.
2. Place the search bar #
Add the shortcode wherever you want the bar to appear (for example, your homepage hero section):
[homerunner_searchbar_pro instance_id="hero" submit_url="/properties/" placeholder="Where are you going?" cta_label="Search"]
- instance_id gives this bar a unique name (useful if you place more than one).
- submit_url is the page guests are sent to when they search (your properties page).
- placeholder is the faint hint text in the Where box for this one bar. Leave it out to use the site-wide Default placeholder from the Settings below.
- cta_label is the text on the search button.
- bar_layout is optional. Set it to
compactorlabelledto override the site-wide Hero bar layout for this one bar.
On your property results page you do not need a shortcode at all: if the page’s property display is set to show its filter bar, Searchbar Pro replaces it with the refine bar automatically while the module is on.
3. Tune which steps show #
You can show or hide individual steps and counters with shortcode attributes such as show_where, show_dates, show_guests, show_children, show_infants, show_pets, and sticky, and set starting counts like default_adults. Leave them off to use the standard Where / When / Who / What layout.
4. Review the site-wide settings #
Open the Searchbar Pro panel in the Toolkit Hub. This is where you set the bar’s wording, brand color, destination list, filter sections, quick filter chips, and default results sort for the whole site. Every option is covered in the Settings section below.
5. Add flexible dates (optional) #
To offer the Exact/Flexible toggle in the When step, also switch on Flexible Search in the Toolkit Hub and choose your stay-length chips and months-ahead range on its settings screen. Searchbar Pro picks up those choices automatically, with no separate setting of its own.
6. Match a sticky theme navbar (optional) #
If your theme shows its own sticky header, leave Sticky bar top offset in the Style settings at 0 and the pinned search bar measures that header for you, so it sits below it instead of being covered. If the automatic measurement lands wrong on your theme, enter the header’s height in pixels to override it.
Settings #
The Searchbar Pro panel is organized into five groups: Content, Style, Behavior, Locations, and Filters.
Content #
| Setting | What it controls |
|---|---|
| Default placeholder | The hint text shown in the Where field before a guest types. Default: “Where to?” |
| Default CTA label | The text on the submit button. Default: “Search”. |
| Live result count | Shows the matching-property count on the hero Search button (for example “Search 12 homes”), updating as a guest picks dates, guests, and filters. If the count cannot be fetched, the button quietly falls back to the plain label. Hero bars only. Off by default. |
| Results count line | Shows a “12 homes” line at the left of the results header on your property results page, updating with every refine. Independent of the hero button count. Until you save the Searchbar Pro settings for the first time it follows your Live result count choice; after that it is its own setting. Off by default. |
| Results sort dropdown | Shows a sort dropdown on the right side of the results-page count line, next to Results count line. Options are your site’s enabled Explorer sorts, the same set the legacy filter bar offered, and changing it re-sorts the grid in place. The Default results sort setting below still controls which option is preselected. Off by default. |
| Describe box placeholder | The prompt text inside the What step’s describe box, shown when AI Concierge is active. Default: “Ask for specific things like a bright, modern kitchen and a yard.” |
| Suggested descriptions | Tappable example chips under the describe box, one per line, up to 8. Leave blank to use the three built-in examples (such as “Mountain retreat with a hot tub and fireplace”). |
| Concierge typing placeholder | Animates the What field’s ghost placeholder with a few short example asks, and adds an “Ask our concierge” header to the What popover. Only runs while AI Concierge is active on your site; without it the field falls back to its plain static placeholder. The example asks and header wording come from AI Concierge’s own Ask Bar settings when you have configured them there, so there is nothing extra to set up here, and it stops animating for good the moment a guest interacts with the field. On by default. |
Style #
| Setting | What it controls |
|---|---|
| Brand accent color | One color that drives the Search button, focus rings, price histogram, and date picker accent. The hover shade is derived automatically. Default: #ff385c. While it is left at that default, the site brand accent from Toolkit Settings applies instead (see Brand Palette). |
| Corner shape | Matches the search bar to your site’s corner aesthetic: Pill (classic, fully-round, the default), Rounded (softens every corner to 12px), or Square (sharp-edged, for editorial themes). The choice coordinates the whole component together: bar, buttons, chips, dropdowns, datepicker, and the mobile search flow. While it is Pill, a site brand radius of 0 in Toolkit Settings makes the bar Square. |
| Hero bar layout | Labelled (classic, the default) shows a small label above each field. Compact drops the label row, swaps the empty-field hints for the three compact placeholders below, and turns the What field into an icon-only Filters button; while a filter is applied, the clear button sits on that icon as a badge in your accent color. Applies to every search bar on the site, hero bar and results-page refine bar alike. The phone search flow does not change. A single bar can override it with the bar_layout shortcode attribute. |
| Compact Where placeholder | The hint shown in the Where field when Compact is on and nothing is entered. In Compact it replaces the Default placeholder above, unless a shortcode sets its own placeholder. Leave blank to use “Destination.” |
| Compact When placeholder | The hint shown in the When field when Compact is on and no dates are picked. Leave blank to use “Dates.” |
| Compact Who placeholder | The hint shown in the Who field when Compact is on and the guest count has not been touched. Leave blank to use “Guests.” |
| Sticky bar backdrop | The gradient fade shown behind the results-page bar when it sticks on scroll, for contrast against the listings. Choose White gradient (the default), Dark gradient, or None. Hero search bars are unaffected. |
| Backdrop blur | Frosts the content showing through the backdrop for extra contrast. Off by default. |
| Backdrop height | How far the backdrop fade extends below the sticky bar, in pixels. Default: 60. |
| Sticky bar top offset | Pushes the pinned search bar down, in pixels, so a sticky site navigation bar does not cover it. 0 lets the bar measure a UIkit sticky header or a header your theme pins in place (fixed or sticky at the top of the page) and follow its height automatically; if no pinned header is found, the bar stays at the top of the viewport. Enter a number in pixels to override the measurement. Applies to the hero pill and the results-page bar on desktop. Default: 0. |
| Offset only while the navigation shows | For themes whose header hides on scroll down and reappears on scroll up (YOOtheme’s Sticky, Show on up setting, for example). With this on, the offset above only applies while that navbar is actually on screen, so the search bar sits near the top the rest of the time. Needs a UIkit sticky header; on other themes the offset stays on at all times regardless of this setting. With the offset left at 0, the bar reads this from the header itself. Off by default. |
| Sticky bar maximum width | Caps the width of the search bar after it pins while guests scroll and opens into the full bar, in pixels, between 0 and 3000. The bar stays centered. 0 keeps the defaults: 890 pixels for the homepage-style bar, and the full results column for the bar on your listing pages. Default: 0. |
Behavior #
| Setting | What it controls |
|---|---|
| Chained fields | Opens the next field automatically as a guest completes each step: picking a destination opens the dates, and completing a date range opens the guest picker. Turn off if you would rather each field just close after a choice. Applies to the desktop bar only; the mobile flow keeps its own step-by-step screens. On by default. |
| Mobile: dates after destination | On phones, tapping a suggested destination in the search screen moves the guest on to the dates step. Turn off to keep guests on Where with the destination filled in, so they can search right away or open the dates when they are ready. On by default. |
| Minimum query length | Characters a guest must type before destination suggestions appear. Default: 2. |
| Debounce (ms) | How long to wait after the last keystroke before looking up suggestions. Default: 250. |
There is no cap on how many destination suggestions the Where dropdown shows: every match appears, and the list scrolls. To keep the list short, narrow it with Included locations and Included cities below.
Locations #
| Setting | What it controls |
|---|---|
| Show the Where field | Shows or hides the destination step across the whole site. Turn it off if every listing is in the same place, since the destination search can then only ever return that one location and just adds a step. When and Who move up to lead the bar. A single search bar can still override the site-wide setting with the shortcode attribute show_where="0". On by default. |
| Nearby option | Adds a “Nearby” row at the top of the destination dropdown. A guest who taps it is asked to share their location, then is dropped straight into the destination closest to them (within about 300 km). This draws on the same list Destination Index builds, plus each property’s saved map location, so turn Destination Index on too and give it a moment to build before switching this on. Properties synced from your PMS already carry that map location; a manually added property without one just will not be considered for a Nearby match. If a guest declines to share their location, or nothing nearby qualifies, the row tells them so instead of going quiet. Off by default. |
| Property name finder | Adds a “By name” tab to the What step so a guest can type a property name and jump straight to that listing. Properties you have hidden from the Explorer do not appear in the finder either, so guests cannot reach them by typing a name. Off by default. |
| Name finder threshold | Portfolios at or below this size are sent to the browser once and matched instantly as the guest types. Above it, the finder asks the server for matches instead, so even large portfolios stay fast and searchable. Default: 500. |
| Show all before typing | Lists the whole portfolio in the By-name tab the moment a guest focuses the empty box, instead of waiting for them to start typing. Large portfolios (above the Name finder threshold) show the first 50 properties alphabetically with a keep-typing hint. Off by default. |
| Destination source | Whether the Where suggestions draw from your locations, your cities, or both. Applies to autocomplete, the suggested list, and mobile. Default: Locations and cities. |
| Destination order | Explorer admin order (the default) mirrors the curated zone list from your HomeRunner Explorer settings screen. Alphabetical builds the list from every published location and city instead, A to Z, narrowed by the two include lists below. |
| Included locations | Check specific locations to limit the Where list. Leave all unchecked to include every location (the default). |
| Included cities | Same idea, for cities. Leave all unchecked to include every city (the default). |
Filters #
| Setting | What it controls |
|---|---|
| Visible filter sections | Checkboxes for Bedrooms, Bathrooms, Property type, Price range, and Amenities. All are on by default. Unchecked sections disappear from the Filter panel and never count toward the active-filter badge. |
| Promoted filter in the bar | Promotes one filter, currently Bedrooms, to its own segment in the search bar, between Who and What, with a matching step in the mobile search flow. The segment shares its value with the same control in the Filter pane, so results and the URL are identical wherever the value is entered. Default: None. |
| Guest picker cap | Where the Who counter stops. Largest property capacity (the default) reads the biggest guest count any of your published properties can host, never below 16, and refreshes every six hours or right away when you click Flush destination cache. No cap lets guests enter any group size. |
| Quick filter chips | Shows a horizontally scrollable row of up to 20 one-tap filter chips under the search bar. Build the row by hand with the repeater (pick a filter type: amenity, group, tag, property type, city, location, Saved, or Featured. The six term types also take the specific term the chip should apply; Saved and Featured need no term, since Saved shows only the homes a guest has hearted and Featured shows your featured homes, and each comes with a bundled heart or star icon you can swap. Then search for a matching icon, which is mirrored to your own site so it loads fast), or click Auto-generate from my listings to have HomeRunner score your own inventory and propose eight chips for you. Auto-generate favors amenities guests actually search for that also meaningfully split your listings; an amenity sitting on nearly every property is skipped since it cannot narrow a search. Nothing is saved until you confirm the proposal, and confirming replaces the current chip row. A tap takes a guest straight to matching properties without opening the Filter panel. On desktop, guests can also grab the row and drag it sideways with the mouse; releasing a fast drag lets the row coast a short distance before easing to a stop, the way a flicked list glides on a phone. Tapping or clicking a chip still works the same either way. Off by default. |
| Show chips on mobile | Keeps the Quick filter chips row visible on phones and tablets (768px and below), where it scrolls sideways with a swipe. On by default; untick to keep chips desktop-only. |
| Default results sort | Which sort your property results open with, site-wide, for guests browsing the storefront. Default: Explorer default (no override). Guests can still pick a different sort themselves. The option you choose must also be enabled on the HomeRunner Explorer settings screen, or the override stays inactive. |
Destination suggestions are powered by your property data. See Destination Index for how that list is built and kept fresh.
Destination cache #
Destination lists are cached by visitors’ browsers and by your site’s page cache for up to an hour, so a location or city you just added or removed does not always show up in the Where dropdown right away. Saving any change on the Searchbar Pro settings screen refreshes the cache automatically. If your locations or cities change some other way (a bulk import, for example) and you want the dropdown current immediately, click Flush destination cache at the bottom of the settings panel.
Tips #
- The What step can offer a plain-language box (“a bright modern kitchen and a yard”). If you run AI Concierge, that text is handed off so guests get smarter matches. See Guest Identity for related personalization groundwork.
- The Who step shares its Adults / Children / Pets thinking with Guest Picker, which applies the same breakdown inside the booking component for accurate pet and child pricing.
- If every property on your site is in the same city or region, turn off Show the Where field so guests land straight on When, cutting an unnecessary step from the search.
- Turn on the Property name finder if repeat guests tend to book the same homes. Typing the first few letters of “Sunset Bluff” and tapping the match beats scrolling a results grid. Add Show all before typing too if your portfolio is small enough that guests would rather scan a list than type.
- Place one sticky bar in your header and a larger hero bar on the homepage by giving each a different instance_id.
- If the labelled bar feels tall over your hero image, try Hero bar layout set to Compact and reword the three compact placeholders to match how you talk to guests (for example “Where to?”, “When?”, “Who’s coming?”). The mobile search flow keeps its standard wording either way.
- If your theme leans sharp-cornered or minimal, switch Corner shape to Rounded or Square so the bar matches instead of standing out as the one pill-shaped element on the page.
- If the sticky results-page bar is hard to read over busy property photos, switch the Sticky bar backdrop to the dark gradient or turn on Backdrop blur for extra contrast.
- If your Default results sort does not seem to apply, check the HomeRunner Explorer settings screen first: the sort you picked has to be enabled there too.
- Want guests without fixed plans to still find something to book? Turn on Flexible Search alongside Searchbar Pro so the When step offers the Exact/Flexible toggle described above.
- If a destination update is not showing up right away, click Flush destination cache on the settings screen rather than waiting up to an hour for it to expire on its own.
- If the Where dropdown feels long, remember it shows every match on purpose. Trim it with Included locations and Included cities rather than looking for a results cap.
- Turning on Nearby? Make sure Destination Index is on too, since Nearby has nothing to search against until that list has built at least once.
- Turn on Quick filter chips for the handful of amenities or property types your guests search for most (pool, pet friendly, a specific area), plus a Saved chip so a guest can get back to the homes they hearted, so they can jump to matching properties in one tap instead of opening the Filter panel. Not sure which ones to pick? Click Auto-generate from my listings and let it score your inventory instead of guessing.
- Chips show on mobile by default now, which is where one-tap filtering saves guests the most typing. If your mobile layout is already tight, untick Show chips on mobile to go back to the desktop-only row.
- If you would rather guests picked and closed each field themselves, turn off Chained fields. Most sites see fewer abandoned searches leaving it on.
- Turn on Promoted filter in the bar if bedroom count is the first thing your guests filter on. It saves them a trip into the Filter panel for the one choice that matters most.
- Hosting groups larger than any single property holds? Set Guest picker cap to No cap so the Who counter never stops guests short.
- Live result count costs a quick lookup every time a guest settles on new dates or filters, so it is worth turning on if a rising number nudges guests toward booking, but it is not required for the bar to work well.
- Set the rotating examples and header wording for the Concierge typing placeholder once, in AI Concierge’s Ask Bar settings. Searchbar Pro’s What field picks them up automatically, so you are not configuring the same copy twice.
- If your sticky bar sits behind your theme’s own header instead of below it, check that Sticky bar top offset is 0 so the bar can measure the header itself, or enter that header’s height in pixels to set it by hand. If your header only shows while scrolling up, also turn on Offset only while the navigation shows so the bar sits near the top the rest of the time.
- The shipped Dutch and German wording has not been reviewed by a native speaker. If a line reads awkwardly for your guests, translate that string in WPML String Translation or Loco Translate, and your version replaces the shipped one.