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

You build your Search Form in the Filter Editor
You build your Search Form in the Filter Editor

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. Type Consultant Name for the Label for the Search box
    3. Click Insert.

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 filte
Adding a custom field as a filter

  1. Position your cursor after the search-box shortcode and click New Filter.
  2. In a dialog box that appears stick to the default values and click Insert shortcode.

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.

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 Element label to Search
    2. In the Element HTML tag dropdwon choose Button.
    3. In the Buttom classnames field type in btn-primary – this is a Bootstrap class that will style your Search button.
    4. Click Insert shortcode.


Note that by using the same technique, you can add a Reset button. Simply use the Reset button 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. Position your cursor before the Submit button
  2. Click on the New filter button.
  3. Locate the “Consultant price per hour” field and click on it.

Adding price range as a filter
Adding price range as a filter

  1. In the dialog that opens:
    1. Choose number for the Compare value as dropdown
    2. Choose between for the Using the comparison dropdown.
    3. Click Insert shortcode.

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.

  1. Change the labels. We will change ours to “Min Price” and “Max Price”

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.

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

Search form in one column
Search form in one column

Search form in two columns
Search form in two columns

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

The Grid button, which inserts Bootstrap markup, will help us.

Inserting HTML markup for the two column grid
Inserting HTML markup for the two column grid

  1. In your Filter Editor, position your cursor after the [wp-filter-controls] shortocode
  2. Choose Grid
  3. In the dialog that opens choose 2 even columns
  4. Move your Consultant name and Consultant area of expertise fields (along with their accompanying markup) and insert them where you see Cell 1

Two column grid
Two column grid

  1. Move the other filters (along with the submit button) and place them where you see Cell 2

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