Filter Search Results In WordPress Using Toolset and Elementor

In this tutorial, we’ll walk you through setting up a custom search with multiple advanced features.

How to create a custom search for a movie review website

On average we lose 3,000 items in our lifetime. The last thing we need is to spend even more time seeking what we’re looking for.

That’s why you want a reliable custom search for your websites. Not only does it make life easier for the user, but it’s also incredibly easy for you to build. That’s because you don’t even need to be a developer or have any coding skills. All you need is Toolset and Elementor.

A custom search is a golden ticket for increasing sales conversions. Using custom search is a piece of cake and really helps users find what they are looking for. Your custom search can be split into two parts, the search form, and the search results.

In this tutorial, we’ll walk you through how to set up a custom search with multiple advanced features. We will also create the content that users will search for using custom post types.

After following these steps, you should have something similar to our personal trainer website below:

What’s So Great About a Custom Search Powered by Toolset and Elementor?

Elementor and Toolset complement each other perfectly to create a powerful feature that will really enhance your website. Elementor is a revolutionary visual design builder that can make your website stand out.

Meanwhile, Toolset’s suite of plugins acts like your very own CMS, allowing you to add all the features you need – nearly without requiring any further plugins.

With Toolset’s custom search you can:

  • Filter by any type of field
  • Display the nearest results to you on a map
  • Display search results as a list, table or grid
  • Include pagination in your results
  • Add AJAX updates, so results update without having to reload the page

Now you know why custom search is such a great option, let’s look at how you actually create one. Follow these easy steps:

What You Need to Get Started​

Here are the main ingredients you need to create the perfect custom search:

  • A WordPress website and theme
  • The Elementor plugin – we recommend downloading the Pro add-on plugin as well as the free version
  • Toolset Types – to create the custom post types
  • Toolset Views – the Query Builder that will create the search

All of these plugins can be installed straight from the WordPress admin. To add Elementor Pro you just need to enter your personal license key on the plugin settings page.

You can install both Types and Views from the WordPress admin once you have registered Toolset.

After everything is up and running, we can start to create our custom search.

1. Create Your Custom Post Type

First off, create a ‘Trainers’ custom post type. Then add the details of each personal trainer to this post type.

In your WordPress admin, go to Toolset->Post Types and click on the Add New button. Fill in the names and slug of your post type and click Save Post Type.

Now we have a section where we can add our personal trainers. However, we still need to fill in the content for each personal trainer.

2. Create Your Custom Fields

Use custom fields to create a template of the information to include within each post.

Start by going to Toolset->Custom Fields and click on the Add New button. After naming the set of fields, start adding new fields by clicking on Add New Field.

Below you can see the four fields we added to the ‘Trainers’ post type:

The final step before we start creating the custom search itself is to add content.

3. Populating Your Content​

Of course, you can’t have a custom search without content to search for. So, let’s add content to the ‘Trainers’ post type.

Just head to Trainers->Add New and start filling in the content. This is how one of the ‘Trainers’ posts looks like on the back-end:

And on the front-end (after some CSS styling):

Now it’s time to start creating our custom search.

4. Creating the Search Results View

As mentioned before, the custom search consists of the search result and the search form. First, let’s create the search result.

The search result will be the View which provides us with a list of items that we are looking for. Let’s add our search results View for the ‘Trainers’ post type.

4.1 Setting up Our Search Results View

Begin by heading over to Toolset->Views and clicking on Add New. At this point, choose what kind of display to create. Since we are creating a custom search, tick the Display the results using a custom search option.

In the next section, we can now start to design our custom search.

4.2 Design the Output for Our Custom Search​

Under the Content Selection section choose the post type you want to filter results for.

Now design the output for the custom search. In other words, the information that will appear for each search result.

To do this, scroll down to the Loop Editor and click on the Loop Wizard. Under the Loop Style section, we can decide how we want our results to be displayed.

For the purpose of this exercise, select the Table option and Make the table sortable by columns, but there are also others worth exploring. Once you have made your choice, click Next.

Let’s now add a list of the custom fields to display for each result. These are the fields we already added for each trainer:

  • Post title with a link to the post
  • Specialties
  • Price per hour
  • Degree

Ensure that the Use a Content Template to group the fields in this loop is checked so that you can edit a single post entry in one place. Click Finish.

Finally, add the text for each of the fields. In between each of the [wpv-heading] fields, we will write the heading. Below you can see where we have done so.

4.3 Add the Image for Each Result

Before we’re done, just add the ‘Trainer Picture’ to the top of the fields so that it’s the first to appear. In the Templates for View section place your cursor before the [wpv-post-link] and click on Fields and Views.

Once we select ‘Trainer Picture’, choose Medium 300×300 as the image size. Finally, click on Insert Shortcode.

Let’s preview our custom search by clicking the Create a page with Views.

You should be able to see a table listing all the posts from your custom post type. Here is a list of all our trainers:

Now that the results are ready, we can create the search form.

5. Create the Search Form

We can now edit the search form and choose what filters to include in it. All these filters are easy to add without any coding. Here are the filters we will add:

  • Trainer’s first or last name
  • Specialties
  • Degree
  • Minimum/maximum price per hour

Scroll up to the View that we used for our search result until you reach the Search and Pagination section. This is where we will add our filters and search button.

To start adding filters, click New filter and select the field groups (mentioned above) in the order needed. After selecting each filter, click Insert shortcode, and the filter will appear.

As soon as we’ve added each filter, label them similar to how we did it for the search results. Each label will be added between the wpml-strings. For example, we wrote ‘Trainer’s first and last name’ so that users know where they can search by name.

Repeat this step for each filter added.

Once you are happy with your filters, the final step is to add the ‘Submit’ button. All you need to do is click on the Submit button and add it to the desired location.

Now preview the search form just like you did for the search result. Once again, choose the Create a page with Views option and select Preview.

Here’s what it looks like:

Now that we have a working custom search we can add it to our website.

6. Inserting Search View on a Website

Adding a custom search View using Elementor couldn’t be easier.

In Elementor edit the page where you want your custom search to appear. Search for the Toolset View widget and drag it into the page. As soon as you select the View you want from the drop-down, you will instantly see a preview.

All that is left to do is the icing on the cake – making our custom search look good!

7. Styling a Custom Search

Never judge a book by its cover, but that doesn’t mean that making our custom search look good isn’t important. With Elementor, it’s easy to add the necessary CSS styling.

We will add CSS in the same section where we inserted the search view on Elementor. Under Custom CSS add code:

You can check out our CSS code in more detail to see what we added.

And that’s it! Now let’s see it in action on the front-end. Here is an example of a search using some of the filters:

By using three filters we narrowed down the perfect trainer to meet our requirements.

Not so hard, right?

Let us know in the comments below if you used custom search on your website.

About the Author

Joseph Lobo
Joseph Lobo
Content creator for WPML and Toolset. Explorer of tools to improve business and countries.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 885,286 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

30 Responses

  1. Great Article! Truly said Elementor and Toolset complement each other. Both together are maximizing creativity and potential of WordPress users. Their power is empowering WordPress greatly!

    1. Ben eluded said in another post “we will have a filtering option coming” . — when I asked the support, they couldn’t elaborate. Any input?

  2. I’ve been really hoping that the Toolset integration with Elementor would finally make Toolset accessible for ‘dummies’ like me when it comes to website build and design. I feel like I am following Dario’s instructions, but I either can’t be, or some steps are left out of the tutorial. But the top level search box that I get is much much smaller than Dario’s, and I don’t know how to get the words above the search boxes.

    Is there any further steps/info that you can add so I can complete these sections.

    Thank you.

    1. Hi Chris,

      Judging by your comment I’d guess you’re having trouble with styling that could be specific to the theme you’re using?

      The first thing I’d suggest is to check if Bootstrap is enabled on Toolset -> Settings in the “Bootstrap loading” section. It’s best to select that Toolset should load Boostrap.

      If that doesn’t help then I’d advise you to try the Toolset support. They will be able to take a look at your site and quickly identify the problem.

      Let me know if you’re still having problems.

  3. I tried to do this by following the article, however I changed size of picture of trainer and it didn’t work, the photo of trainer still remain the original size.

  4. Hello
    very interesting. In the part create the surch form of the tutorial there is code. you have to be a developer or you can use toolset without knowing how to code.
    thank you so much

  5. Hello Joseph. Thank you very much for the tutorial.
    I´d like to ask:
    – Is it possible to make search fields to be like CHILD from previous field?
    example: for a Real State website search form, the first field City, makes the second field NEIGHBOURHOOD to show options of neighbourhoods from that City that have properties?

  6. I’ve been a Toolset user since the beginning and a recent Elementor adopter. I like the melding thus far, but what’s really missing is the ability to style view filters with Elementor. Having to code CSS into the views’ CSS editor feels a bit archaic and quite honestly is a real pain in the you know what. Would love to see this integration happen sooner rather than later.

  7. Hi,
    I’m trying to follow this tutorial, but it appear Toolset Views isn’t available/free, anyway, can’t find it when searching the plugin… Do you know about this? Have somme alternative?

  8. Is it possible to enter a link to the trainer’s own website on the post type, and then add a button in the view which would then link to the website in question?

    That would make Toolset the perfect solution for advanced affiliate marketing websites, which rely on product and service comparison/ranking tables and sending visitors off to service provider sites.

    The table on this site is an example of what I mean:
    https://www.top10sportsbookies.co.uk/

  9. Hi!
    I’m making my first view and chosen Bootstrap, as suggested. In settings is loading Bootstrap 3.0. For some reason, it’s not showing me the amount of columns that I set. It only displays info one after the other.
    Any idea?

  10. When will Elementor have this search and filtering option without the need to buy another add-on? Seems crazy not to have a filter option on posts already…

  11. Hello Joseph, great tutorial. One quick question is this searching and filtering in realtime created with toolset widget? URL: https://www.geekseller.com/integrations/.
    I love how it is showing up and disappearing whilst searching. I would love to create similar searching for tools-resources on the website or pay someone to do it with nice clean design ( nice wide gaps, etc… ) Thank you for answering !

  12. Hello, I’d like to have the search bar on my home page, then when the user searches I’d like to take them to a results/archive page – with the search term pre-filled. I’d also like to have the ability to filter blogs while still having the original search term active.

    ex: Dan lands on homepage, he searches “London”, Dan is taken to a results page with his “London” search still applied. Dan now wants to filter out the food blogs and only look at the drink blogs, so he checks the Food checkbox and now a list of blogs on “London” and “Food” are presented on the results/archive page.

    In the video Dario is able to split the search field and the results field. However I’m unable to do so. In the elementor side bar the “Custom Search” and “What do you want to include here?” boxes aren’t appearing for me. I’m using the 69$ version of Toolset.

    PLEASE advise, we’ve pounded our head on the table for 4 days on this.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 885,286 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.