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)
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:
Three or more search fields
To properly organize three or more search fields, follow these steps:
- Insert a Container block, then insert a Grid block inside it.
- 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.
- 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.
- 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.
And here another example of a custom search 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.
Related topics
- Filtering Custom Lists of Posts
- Filtering Toolset Views by Dates
- Enabling Legacy Version of Toolset Views
- Displaying Images with Toolset
- Styling a Site Header and Footer
- Styling Views and Archives
- Styling Single-post Templates
- How to Design and Choose Images and Illustrations
- Choosing and Applying Colors in Your Site
- Using Typography for Better Website Readability
- WordPress Site Identity
- Where a WordPress Sites Design Comes From
- Adding Custom CSS to Templates, Archives and Views
- Passing Arguments to Views
- Adding Custom JavaScript to Views, Templates and Archives
- Displaying Search Results on a Different Page
- How to Create Custom Searches and Relationships for Users
- Display Dynamic Sources Inside all Text Blocks
- Searching Texts in Custom Fields with Toolset and Relevanssi
- YouTube Videos with Advanced Options
- Displaying Form Data
- Styling Front-End Forms
- Displaying a List of Posts on A Map
- Creating a Custom Search
- Creating a Hero Section
- Creating Sliders with Dynamic Post Content
- Adding Dynamic Content to Your Homepage
- Creating a View
- Creating a Custom Archive Page
- Creating Responsive Columns and Grids
- Creating Responsive Designs
- Advanced Styling with Container Blocks
- Display Content Conditionally
- Using Third-Party Hidden Fields
Envía tus comentarios a nuestro equipo de documentación