Creating customised search results pages for each search form using the Extras Search Form

This tutorial explains how you can achieve a customised search results page that displays only for a certain search form on your website, using Elementor, Elementor Pro and Elementor Extras.

With Elementor Pro you can modify the appeareance of a search results page using the Theme Builder. Problem is, it looks the same for every search performed on your website. Let’s assume you need a different page when visitors search for products than the one visitors use to search you blog posts. You can do this with Extras.

As we’ve mentioned creating a custom search results page with the Theme Builder is simple. It’s done by creating an Archive template and adding the condition to Include in Search Results, like this:

The problem here is that you can only define one template page for ALL search results, which means that if you’re allowing visitors to access a different search form that searches, for example, only for the custom post type called Events, this will look the same as your search results for posts. In fact, it will look the same for ALL search forms.

You can solve this problem using Elementor Extras. The Search Form widget allows you to define a unique ID to the form which you can then add to a new condition we’ve added to the Theme Builder conditions. Follow the steps below to accomplish this:

1. In the Search Form widget settings: Go to Content > Settings > Search ID and enter a unique ID for this form.

2. Save your page.

3. Go to Templates > Them Builder in your WordPress dashboard and click Add New in the top left of the page.

4. Select the Archive template type and enter a name for your template under “Name your template”.

5. Create your search results template anyway you want. Either import templates from the Template Library or use the Posts Extra widget and set the Source to “Current Query“.

6. Click Publish in the bottom left corner. The Theme Builder’s Display Conditions popup will appear.

7. Click Add Condition and select Extras Search Results from the dropdown.

8. On the right-hand side of the dropdown, enter the ID of the Search ID you entered earlier in the Search Form widget settings.

9. Click Save and Close and test out your unique search results template!

This feature of Elementor Extras provides a lot of flexibility. Together with the Search Form widget, which you can use to add filters and restrictions to your search in WordPress, it brings powerful customisation options to Elementor.

Share on facebook
Share on google
Share on twitter
Share on linkedin