Buy Now
Home » Course lessons » Creating a Custom Search

Creating a Custom Search

In this lesson you'll learn how to add a custom search to any WordPress site, for any kind of content. You can create custom searches inside pages and in an archives.

Duration

With Toolset, you can build custom searches for any post type. You choose what to search by, how to style the search box and how to display the results.

A basic search allows visitors to filter and find matching results. You can enable pagination, AJAX updates and sorting to enhance the custom search and make it more usable for sites that have a lot of content.

Custom searches built using Toolset

Custom search for properties

Custom search for travel destinations

Follow these steps

There are two main steps for creating a custom search:

1. Create the custom search form

2. Design the custom search results

It doesn’t matter which of these steps you do first. However, having at least simple search results makes it easier to test the search form.

Here is an example of a complete custom search, with both the form and the results.

Custom search with the search form and search results

1. Creating the custom search form

You start by inserting a View block into your page.

In the View creation wizard, enable the Search option.

Enabling the custom search when creating a new View

After finishing the View creation wizard there is a View Search section in the View’s editing area. Use the available buttons to add a custom search field, insert submit and reset buttons, or add other blocks.

Custom search section when editing a View block

For example, you can click to Add Search Field and use the Select a Field dropdown. Select by which content type you want users to be able to search by and click Next.

Adding a custom search field

You can now use the right sidebar to tweak the options for this search field. This includes the main field settings, label and style options.

2. Creating the search results

The results of a custom search is basically a list of posts. In Toolset, we call such lists Views.

You create a View using Toolset blocks as they allow you to display dynamic content coming from custom fields, taxonomies, and standard post fields.

You can then use the styling options within each Toolset block to design how the list will look like.

You can also enhance search results by adding pagination, front-end sorting, or making results update on-the-fly using AJAX.

For more information see below and in the lesson about creating custom lists of posts.

Enable custom search for existing Views

When creating a new View, the Search option is disabled by default.

However, you can turn on the custom search feature for existing Views at any time:

  1. Click to select the main View block.
  2. In the General section (expanded by default), toggle the Search option.

A section called View Search will appear in the main editor.

Make the search results update on-the-fly

AJAX refresh when changing any filter

By default, after selecting the search parameters, users need to click a submit button to see a list of posts that match their search.

You can easily make the search results update on-the-fly, without reloading the page:

  1. Select the main View block and in the right sidebar, expand the Custom Search section.
  2. Select the AJAX refresh when changing any filter option.

Note that your form doesn’t need a submit button when using this option.

Add front-end sorting to search results

Adding front-end sorting to search results

You can allow users to sort the results of the custom search.

You can enable sorting when creating a new View by toggling the Front-end sorting option.

To add sorting controls to an existing View use the following steps:

  1. Click to select the View block and click the Add Sorting button. You can find it at the top and bottom of the View Output block.
  2. Click the sorting control that appears and use the right sidebar to select the options.

You can select what to sort by, adjust the labels, tweak the styling, and more.

Add pagination to search results

Search results could have a long lists of results. Pagination lets you breaks such lists into pages so visitors can switch between them without losing the search query.

By default, pagination is turned on when creating a new View. You can click the pagination controls and tweak the options using the right sidebar.

Use the right sidebar to tweak pagination options
Use the right sidebar to tweak pagination options

Enable pagination for an existing View

If you have an existing View without pagination you first have to enable it. To enable pagination, select your View block in Block navigation and expand the Pagination section in the right sidebar. There, click the option to enable pagination and tweak the options.

How to style a search and results

styling search

Toolset blocks allow you to design and style everything inside the block editor.

You design a View with a custom search using different blocks. They will have different styling options. The most common styling options are for Toolset blocks are:

  • Typography – change the appearance of blocks that output text
  • Style Settings – change colors, margins, paddings and borders, drop shadows and more.
  • Advanced – block allignment, hide element, and more.

Besides styling the blocks themselves, there are two Toolset blocks that help you design your Views and its custom search:

  • Toolset Container – group multiple blocks and apply styling to them: add a background, margins, paddings, and more.
  • Toolset Grid – display elements side-by-side in any type of columns: adjust column width, number of columns, and more.

Setting up the View search and results side by side.

Setting up the View search and results side by side

We’ll use the Toolset Grid block to position the search box and search results side-by-side. The trick is to insert the Grid block into the View Block and then drag the View Search and View Output sections into the grid cells.

  1. Scroll down to the bottom part of your View.
  2. Use the + icon inside your View to insert the Grid block. Double-check if you are inserting your Grid block inside your View.
Where to insert the grid block
Where to insert the grid block
  1. Use the Grid block up arrow to move up your Grid block to the top of your View.
  2. Grab the View Search block and move it inside the left cell of your grid. 
  3. Grab the View Output block and drag it into the right-hand cell.
  4. Use the Block navigation to make sure your View structure looks like this:
View structure to set up the View Search and View Output side by side
View structure to set up the View Search and View Output side by side
  1. Shift your column sizes to give more room to the search results. 
  • Hover over the grid until the column line appears.
  • Grab it and slide it over a bit to make your right-hand cell wider.

Amir
Originally written
May 13, 2020
Updated
July 5, 2020