ToolkitCustomizeWidgets

Homepage Search Widgets

What This Replaces

Brilliant Directories comes with a basic search bar — one text field and a search button. It works, but it doesn't help visitors narrow down what they're looking for before they search.

DirectoryCustomize's Homepage Search widgets replace that default search bar with smart dropdown menus that guide visitors through your category structure. Instead of typing and hoping, visitors pick from organized dropdowns that automatically filter based on what they've already selected.

Why this matters: Directories with structured search see higher engagement because visitors find what they need faster, with fewer dead-end searches.

---

On This Page

Section What It Covers
Available Search Layouts Which dropdown combination fits your directory
Smart Filtering Between Dropdowns How the dropdowns work together automatically
Multi-Select Let visitors choose multiple options per dropdown
Choosing the Right Layout How to decide which search layout matches your site
Configuring Your Search Widget Step-by-step settings walkthrough
Design and Colors Matching the widget to your site's look
Troubleshooting Common issues and how to fix them

---

Available Search Layouts

Each layout gives your visitors a different combination of search dropdowns. Choose the one that matches how your directory categories are organized.

Layout What Visitors See
Sub Category Only A single dropdown letting visitors pick a specific category
Top Level Category A single dropdown showing only your main category groups
Sub + Location Two dropdowns — pick a category, then pick a location
Top + Sub Category Two dropdowns — pick a broad category, then a specific one underneath it
Sub + Sub-Sub Category Two dropdowns — pick a category, then a more specific sub-category
Sub, Sub-Sub + Location Three dropdowns — category, sub-category, and location
Top, Sub + Sub-Sub Three dropdowns — full three-level category drill-down

---

Smart Filtering Between Dropdowns

Each dropdown is connected to the one before it. When a visitor picks a value in the first dropdown, the next dropdown automatically shows only the options that belong under that selection.

Example: If your directory has "Home Services" as a top category with "Plumbing" and "Electrical" underneath, selecting "Home Services" in the first dropdown means the second dropdown only shows "Plumbing" and "Electrical" — not every sub-category in your entire directory.

This prevents visitors from selecting combinations that don't exist and keeps the search experience clean.

---

Multi-Select

What BD gives you by default: One selection per dropdown. A visitor looking for both plumbers and electricians has to search twice.

What DirectoryCustomize adds: Visitors can select multiple options in a single dropdown before searching. Someone looking for "Plumbing" and "Electrical" picks both, hits search, and sees combined results — one search instead of two.

---

Choosing the Right Layout

Not sure which layout fits your directory? Here's how to decide:

Your Directory Structure Best Layout
Simple categories, no nesting Sub Category Only or Top Level Category
Categories with a location component Sub + Location
Broad categories with specific options underneath Top + Sub Category
Three levels of categories (e.g., Industry → Service → Specialty) Top, Sub + Sub-Sub
Deep categories plus geographic filtering Sub, Sub-Sub + Location

Still not sure? Contact support — we'll recommend the right layout based on how your categories are set up.

---

Configuring Your Search Widget

Open the DirectoryCustomize plugin, go to My Widgets, and click the wrench icon on your search widget. You'll see these configuration tabs:

Settings Tab

Setting What It Controls
Placeholder text The default label shown in each dropdown (e.g., "Select a category...")
Button text What the search button says (e.g., "Search" or "Find")
Multi-select toggle Whether visitors can select more than one option per dropdown
Submit on select Whether the search runs automatically when a visitor makes a selection
Show result count Display how many results match the current selection

Design Tab

Setting What It Controls
Background color The area behind the search widget
Dropdown background The color inside each dropdown
Text color The color of labels and placeholder text
Border color The outline around each dropdown
Button color The search button color
Button text color The text color on the search button
Border radius How rounded the corners of the dropdowns and button are

Layout Tab

Setting What It Controls
Width How wide the search widget spans (full width, contained, etc.)
Alignment Left, center, or right positioning
Spacing Gap between dropdowns
Responsive behavior How the dropdowns stack on mobile screens

---

Design and Colors

Your search widget should match your site's branding. Start with the Design tab and adjust:

  1. Set the button color to match your site's primary action color
  2. Set the background color to complement your homepage header
  3. Adjust border radius — use 0 for sharp corners, higher numbers for rounded
  4. Preview the result on your live site — changes save automatically

If you want to start over, click Reset to Defaults in the toolbar.

---

Troubleshooting

The widget pulls categories directly from your BD category structure. If the wrong categories are showing, check your category hierarchy in BD Admin → Categories.

Second dropdown is empty

This usually means there are no sub-categories under the selection in the first dropdown. Verify that your BD categories have proper nesting (parent → child relationships).

Widget doesn't appear on homepage

Make sure the widget is enabled in the My Widgets tab (toggle should be on). If it's enabled but still not showing, contact support — the widget placement may need to be checked.

Search returns no results

This is typically a BD configuration issue, not a widget issue. Make sure you have published content in the post type your search is targeting.

---

Need help? Use the Support tab inside the plugin to submit a ticket.