In this tutorial we will show you how to create any WordPress page as a search result page or a page that will automatically refresh its content according to the filtering we do. The default WordPress search and the default wordpress search result page won’t bother us in this tutorial.
It’s a continuation of the previous tutorial for those who do not have a search result page or do not know how to implement a result page with filtering plugins.
Visit the previous tutorial, WordPress search form with multiple custom fields here.
The Tools We Use
In this tutorial we are going to demonstrate you a way to implement a normal WordPress page and act as a result page for your current listing. We use specific tools but the logic is the same when it comes to filtering plugins and archives. We use the below tools:
- Elementor Pro
- Jet Engine
- Jet Smart Filters
to create pages, custom fields, and filters.
Navigate to your WordPress dashboard. Go to pages, add new. And make a result page. I will call mine aggelia and then edit it with elementor.
At the same time create a custom post type using Jet Engine. I will call this Aggelia. If you don’t know how to use Jet Engine and Jet Smart Filters here are some usefull links to get you started and finish this tutorial.
From the official Jet Engines Website,
Add one or more custom taxonomies to the custom post type we just created and name some categories just like you would in the posts categories.(like featured, etc).
So i call my custom taxonomy geographical_position and I include some of the countries i know.
Now navigate to Jet Smart Filters Plugin and make some filters based on custom taxonomies or custom fields you created. I make just one for the geographical_position taxonomy.
If you don’t know how to use jet smart filters here is the basic documentation from their official website:
- How to create a Checkboxes filter. A difference between Checkboxes, Select and Radio filters
- How to specify the widget for which to apply the JetSmartFilters widget’s filter
Now we are ready to develop our custom result page. Edit the page we created on step 1 with the help of elementor pro and customize as you like. You will need the listing widget of jet engine to list the post for the custom post type you created, in my case aggelia. You will also need a filtering widget, I will choose checkbox filter.
Note: I use checkbox filter because i chose to filter geographical_position with checkboxes on step 3.
Last but not Least
In your checkbox filter don’t forget to enable apply button so you can see how the url changes on your result page.
Url changes when ever you apply the changes on your checkbox filter like this.
My starting url: https://aggeliesellada.tk/aggelia/
My filtered url with one parameter: https://aggeliesellada.tk/aggelia/?jet-smart-filters=jet-engine/default&_tax_query_geographical_position%5B%5D=71
My filtered url with two parameters: https://aggeliesellada.tk/aggelia/?jet-smart-filters=jet-engine/default&_tax_query_geographical_position%5B%5D=71&_tax_query_geographical_position%5B%5D=73
Note 1: Jet Engine uses a prefix on the url, ?jet-smart-filters=jet-engine/default
Note 2: Jet Engine is using the term_id from our custom taxonomy that we created to filter the results and not the name. You can find the name and term_id in your wp database or just hover the taxonomy name in your WordPress dashboard.
So there you have it, a custom result page that you fully control. Now you can build your own custom search on home page or any other page of your WordPress site and filter the results on the page you just created. If you don’t know how check this tutorial.