Skip Navigation

Styling Custom Searches in WordPress

A custom search helps users find exactly what they are looking for. It is important its design matches the rest of the site and is easy to understand. Learn how to style and arrange your custom search using Toolset.

You can add custom search to a View or WordPress Archive. The wizard for creating Views and WordPress Archives offers you the option to enable the custom search. You can also enable it for existing Views and WordPress Archives.

A custom search generally consists of:

  • Search box that offers fields to select
  • Reset button (optional)
  • Submit button (optional)
Adjusting the Custom Search settings for an Archive

Before designing your custom search, finish setting up the search settings and add the search fields you want to use. If you aren’t sure how to do this, read how to create a custom search.

Designing the custom search layout

How you design the layout for your search fields depends on how many you plan to use. 

One to two search fields

Use the Toolset Grid block to place search fields next to each other. Make sure the column widths are all the same to keep it neat. On the front-end, it will look like this:

A front-end example of a custom search with two search fields

Three or more search fields

To properly organize three or more search fields, follow these steps:

  1. Insert a Container block, then insert a Grid block inside it.
  2. Insert the search fields into the Grid Cells. Only add the ones you want to visually group together, you can make more groups in the other Grid Cells.
Displaying the block structure in block navigation
  1. Set the padding inside your Container block. Select it from block navigation and expand the Style Settings panel on the right sidebar. Enable Margin / Padding and adjust the padding as you see fit. 
  2. Select the Container and expand the Background panel on the right sidebar. You can choose to add a background color or add a background image with an Overlay Color. To do this, select Image under the dropdown menu for Type. Click on the circle next to Overlay Color and choose the color you want. 

Once you are done, make sure you check everything on the front-end. 

An example of a Custom Search with a background image

And here another example of a custom search on the front-end.

A View with search fields visually grouped together on the front-end

Styling the Search Fields and Buttons

Now, you should have all the search fields nicely arranged in columns. The last thing to do is style the search fields and buttons.

In general, keep the following tips in mind:

  • Use the Margins / Padding or Grid Settings panel on the right sidebar to visually separate search fields from one another. What you use depends on how you set up your layout. 
  • Make sure your search boxes and buttons are consistent with the rest of the website design (Border Radius, Colors, Fonts, etc.).
  • Make the reset button less visible than all other content in the Custom Search.
Mai 11, 2021