Toolset allows you to create a custom search for any custom post type. Your searches can include filters based on custom fields and taxonomies.

In this tutorial, we will build a search that allows you to find a consultant. The Consultant Post Type already exists in your training site.

Your task

Create a search that allows to search Consultants based on a free text field (consultant name), taxonomy terms (foreign languages) and custom fields (area of expertise), including a range of data (prices).

Display the results in a table.

Outcome of this tutorial - custom search
Outcome of this tutorial – custom search

Step 1 – Adding a page for the search

First, let us create a new page that will include your search.

Switching to the Layout Editor
Switching to the Layout Editor

On your training site:

  1. Add a new page and give it a name e.g. “Find your consultant”
  2. Click the Content Layout Editor button to begin designing the body of your page body with Layouts.
Creating the page body by using Layouts
Creating the page body by using Layouts

You create the body of your page by using Layouts and inserting rows and cells.

In the next step, you will add a View cell that includes your custom search.

Step 2 – Creating a custom search View

Anatomy of a Custom Search built with Views
Anatomy of a Custom Search built with Views

A custom search built with Toolset consists of two parts:

  • Search form
  • Search results

The Search Form includes Filters and a Submit (search) button.

Filters are input fields that visitors can use to specify their search criteria.
The Search Results displays the posts found in the search.

To create a custom search, you need to create a View cell that will contain a Search View.

Adding a cell for the search View
Adding a cell for the search View

In your layout:

  1. Draw a 10-column cell.
  2. On the screen that opens, locate the View cell and insert it.
Creating a View for searches
Creating a View for searches
  1. In the “Create new View cell” dialog, check the radio button “Display the results as a custom search.”
  2. Click Create.
Setting up a search View
Setting up a search View

Now you are creating your search view.

  1. Give your View a name, e.g.: “Consultant Search”
  2. In the Content Selection section uncheck Posts and choose Consultants.

Step 3 – Setting up search options

Custom Search Settings
Custom Search Settings

Scroll down to the “Custom Search Settings” section.

  1. In the “How do you want to update the results?” subsection, choose “Full page refresh when visitors click on the search button.”
  2. In the “What do you want to display in this cell?” subsection, choose “The search form and the results.”

Next, we will design both the search form and search results in one cell (the one we are creating now)

Step 4 – Building your search form

Adding a filter to search by post title
Adding a filter to search by post title

Scroll down to the Filter Editor section. Here, you build your Search Form.

Adding a filter to a search by post title

We want to allow searching for consultants by their names.
On our site, we use post title to store a consultant’s name. To search your posts by post titles or by post body, you use a special filter called Text Search.

Adding a filter to search by post title
Adding a filter to search by post title
  1. In the Filter Editor:
    1. Position your cursor between the [wpv-filter-controls] and [/wpv-filter-controls] shortcodes.
    2. Choose the “Text Search” button.
Setting up a filter to search by post title
Setting up a filter to search by post title
  1. In the pop-up window:
    1. Select the “Just post title” radio button.
    2. Click Insert.
Adding a label
Adding a label

For a label, we will use “Consultant Name” wrapped in h3 HTML tags.

Adding a custom field as a filter

Toolset allows you to use custom fields as filters.
Let’s include a “Consultant Area of Expertise” custom field in our search form.

The field already exists in your training site and was created using the Toolset Type plugin.

Adding a custom field as a filter
Adding a custom field as a filter
  1. Position your cursor after the search-box shortcode and click New Filter.
Adding a custom field as a filter
Adding a custom field as a filter
  1. In a dialog box that appears:
    1. In the Filter by dropdown, choose “Consultant Area of Expertise.”
    2. In the Input type dropdown, choose checkboxes.
    3. Click Insert.

Your field and its corresponding label have been added as the [wpv-control] shortcode. Notice also that the label has been wrapped in wpml-string shortcodes in preparation for WPML translation.
Wrap your field label in h3 HTML tags (see the screenshot at left).

Adding a Submit button

Visitors use a Submit button to run the search.

Adding the Submit button
Adding the Submit button
  1. Position your cursor after your last filter.
  2. Click the Submit button.
Setting up the Submit button
Setting up the Submit button
  1. In the dialog that opens:
    1. Change the Button label to Search
    2. In the Buttom classname field type in btn btn-primary – these are Bootstrap classes that will style your Search button.
    3. In the Button HTML tag dropdwon choose Button.
    4. Click Insert.

Note that by using the same technique, you can add a Reset button. Simply use the “Clear form” to insert it.
How the Filter Editor looks so far
How the Filter Editor looks so far
  1. Click the Save and Close this view and return to the layout button.

Step 5 – Previewing your search form on the front-end

Cell with your search view
Cell with your search view

The cell with your search view has been added.

Let’s check the appearance of our custom search on the front-end

Click Preview.

Search Form after completing the steps presented so far
Search Form after completing the steps presented so far

Our search page looks like on the screenshot.

The search form displays and includes the filters as well as the Search button you added.
If you press the button, nothing happens. This is because we have yet to design the display of results. We will next tackle this task.

Step 6: Designing the search results

We want the results to look as follows:

How are search results section will look like
How are search results section will look like

Defining the sorting order

Defining the sorting order
Defining the sorting order
  1. Click on your View:Consultant Search cell to edit it.
  2. Locate the Ordering section.
    1. Choose “Post Title” from the first dropdown.
    2. Choose “Ascending” from the second dropdown.

Your results will display in alphabetical order.

Designing the output

Setting up the search results using the Loop Wizard
Setting up the search results using the Loop Wizard
  1. In the Edit View cell screen, scroll down to the Loop Output Editor section.Here you define how the “Search Results” output will look.
  2. Click on Loop Wizard.
  3. In the “How do you want the View to display?” pop-up,
    1. Choose Table.
    2. Check the option below it to make the columns sortable.
Selecting fields to display in each entry of the search results
Selecting fields to display in each entry of the search results

On the next screen, we will choose for each result the fields to display.

  1. Click on the Add a field button to include the following fields:
    • Consultant image
    • Post title with a link
    • Consultant Area of Expertise (custom field)
    • Consultant price per hour (custom field)
    • Foreign languages (taxonomy)
  2. Edit the Consultant image field to insert it as a thumbnail.
  3. Make sure the “Use a Content Template to group the fields in this View Loop” option is checked. This will help us style the results more easily.
  4. Click Finish.
Template displaying the fields for each search results’ entry
Template displaying the fields for each search results’ entry
  1. Click Scroll down to the Content Template. You will see your fields inserted as shortcodes (one shortcode per table cell).
Adding a Consultant’s Image to the Search Results
Adding a Consultant’s Image to the Search Results

Views creates a separate table cell for each custom field you added using the wizard. We included the consultant name in the second cell, but we also want to include the post excerpt in the same cell.

Let’s add it now.

  1. Position your cursor after the [wpv-post-link] shortcode.
  2. Click “Field and Views.”
  3. Choose Post excerpt and set it to display 30 words.
  4. Insert the shortcode.

Your shortcodes will appear as those in the picture that follows. In addition, we show how they will appear on the front-end.

Please note that we manually wrapped the image in an a href HTML tag to link it to the consultant post, and we used the strong HTML tags to bold the consultant name.

Custom fields inserted as shortcodes and how they will be rendered on the front-end
Custom fields inserted as shortcodes and how they will be rendered on the front-end
  1. Click Save and Close this view and return to the layout and then preview your layout.

The results should appear under your search form.

Search form after completing the steps covered so far
Search form after completing the steps covered so far

Hint: If you want the results to be preceded by a heading (e.g., “Search results”), you can do this in the Loop Output Editor section just after the wpv-loop-start line.

 

 

Step 7 – Adding more fields to your search form

Now that your search is functioning properly, you can add filters using the same technique you have just learned. In our example, we will add one more custom field and custom taxonomy.

Adding price range as a filter

We want our visitors to select consultants based on their price range. This is easy to handle with the “between” comparison function.

Open your View:Search Consultant cell again and scroll down to the Filter Editor section.

Adding price range as a filter
Adding price range as a filter
  1. Click on the New filter button.
  2. Choose “Consultant price per hour” from the dropdown.
  3. Use the “textfield” as the input type.
  4. Use “BETWEEN” as the comparison function and “NUMERIC” type (in the “Advanced” section) to compare the values.
    The picture will help. Insert the filter.
Filter section after inserting the price range
Filter section after inserting the price range

The input fields for minimal and maximal price will be inserted as shortcodes.
Feel free to change the labels. We will change ours to “Min” and “Max” and add the “Price per hour” h3 heading.

Your Filter Editor section should appear as on the screenshot on the left:

Adding custom taxonomy as a filter

Adding custom taxonomy as a filter
Adding custom taxonomy as a filter

On our training site, “consultant foreign languages” have been implemented as a custom taxonomy. Let’s add it as a filter as well.

  1. Use the “New filter” button to insert your locate the Foreign languages taxonomy and insert it.
  2. In the dialog box, type “Any” for the “Label for ‘not selected’ option” and retain the default options for the other fields.
  3. Then, click on Insert to insert the field.
Filter section after inserting the “Foreign language’s taxonomy”
Filter section after inserting the “Foreign language’s taxonomy”

Your Filter Editor section should appear as on the screenshot on the left.

Click the Save and Close this view and return to the layout button.

Step 8 – Styling the search form

Our search page should appear like in the picture to the left.

After styling
After styling
Before styling
Before styling

Styling the form

Filter editor with added html and CSS
Filter editor with added html and CSS

We will now add some HTML and Bootstrap classes to have the output appear in two columns (like the picture on the left).

Styling the search results

Changing the table headings
Changing the table headings

Let’s change the table headings to make our output more visually appealing.

In your Search View, scroll up to the Loop Output Edit section

  1. Add the class=”table table-striped” to the table tag
  2. Add width=”40% to the second heading to narrow its width.
  3. Change the table headings based on those in the table that follows:
Default heading New heading
Consultant image (no title)
Post title with a link Consultant
Consultant area of expertise Area of expertise
Consultant price per hour Price per hour
  1. Click the Save and Close this view and return to the layout button.

Now your search page should look as follows:

Summary

In this tutorial, you learned how to build a custom search for your custom post type.

Remember:

  • Use the Views cell to create your search.
  • Design your search form with input fields in the Filter Editor section of your view.
  • Design your search results in the Loop Output Editor section.

Need help?

Go to the Toolset training support page and leave your comment. Agnes, who created the tutorial will reply to you.

What’s next?

Part 8 – One-to-many relationships in Toolset