Saltar navegación
Comprar Ahora
Inicio » Course lessons » Creating a Custom Search en WordPress

Creating a Custom Search en WordPress

A custom search allows people to find exactly what they are looking for in WordPress sites. Toolset makes it easy to build searches for any type of content.

Duración

With Toolset, you choose what to search by, how to style the search box, and how to display the results.

You can also enable pagination, AJAX updates, and sorting to enhance the custom search and make it more usable for sites that have a lot of content.

Besides this you can display custom search results on a map, or set up the search box and results results side-by-side.

Custom searches built using Toolset

Custom search for properties

Custom search for travel destinations

On this page

Steps for creating custom searches

There are two main steps for creating a custom search:

1. Create the custom search box

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 box 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. Instead of writing custom queries, Toolset does everything for you. All you need to do is visually design what and how you want to display for each post.

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 even display Dynamic Sources using WordPress core blocks and popular block plugins. Insert them and in the right sidebar, expand the Dynamic Sources section. Toggle on the option for any of the supported fields in that block.

Toolset even allows you to display Dynamic Sources inside any text blocks like headings, buttons, and more. For more information, check out the lesson about displaying Inline Fields.

You can also enhance search results by adding pagination, front-end sorting, or making results update when search inputs change.

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

Make the search results update when search inputs change

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 when search inputs change, 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.

Style the search box 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.

To learn all about this topic visit the lesson about styling custom searches.

Display the search box and search results on different pages

Sometimes, you might need to display a custom search box on one page and show the results on another.

To do this, you need to create a View in the “results” page and insert that View again where you want to show only the search box (like on the site’s homepage).

See the full details in the lesson about displaying search results on a different page.

Display the search box and search 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 plus icon inside your View to insert the Toolset Grid block. Make sure 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.

By default, a View with your custom search will display all initial results right away. You can customize the View so that it displays results only after users select and submit some search parameters.

You can do this by wrapping the Loop Output section of the View in a Conditional block, where the condition checks for the presence of a URL parameter. This parameter is always added when filtering a View, but it isn’t present when the page loads for the first time.

Use the following steps to hide initial results:

  1. At the top of the existing View add the Conditional block. It is very important to place the Conditional block within the View Output block, but outside of the View Loop block.

 

Correct placement of the Toolset Conditional block
Correct placement of the Toolset Conditional block

  1. Select the Conditional block and in the right sidebar, click the Edit conditions button.
  2. Turn on the Advanced Editor and enter the following code into it:
  1. Click the Accept button.
  2. Now that the condition is set, you can drag-and-drop the View Loop block into the Conditional block.
  3. Update the page.

When you visit the page with the View on the front-end you should see only the search fields. The search results will appear only after selecting and submitting some search options.

Display the search results on a map

The View with your custom search can also display items on a map. As visitors use the custom search, the map will automatically update to display only items that were returned by the search.

You can also easily display custom search and the map side-by-side like many popular websites.

Use the following steps to add a map to a View:

  1. Edit the page that holds your View with a custom search and insert the Toolset Map block.
  2. In the right sidebar, scroll down to the section for the map marker.
  3. In the Source for the marker option, select View block and make sure your View with a custom search is selected.

For a video tutorial and more information see the lesson about displaying a list of posts on a map.

How to search by post relationships

Toolset allows you to create relationships between different post types and connect posts. You can easily add custom search filters based on such relationships.

For example, a real estate site might have post types for properties and cities. When users search for properties, they can easily filter them by the city they’re interested in.

Follow these steps:

  1. Edit the page that holds your View with a custom search.
  2. In the View editing area, click the Add Search Field button.
  3. In the dropdown that appears select the Post relationship or repeatable field groups owner option.
  4. In the right sidebar, expand the Field Settings section and use the dropdown menu to select the relationship you want to add a filter for.

That’s it, the search will now include a field by the relationship you selected.

To learn more about this check out the lesson about what post relationships are and how they work.

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.

Main Toolset Block Used in this Lesson

View

Cree listas de entradas personalizadas

Dario
Updated
mayo 18, 2021
Envía tus comentarios a nuestro equipo de documentación