I’ve been searching on how to add multiple search fields or multiple search criteria on wordpress search. Or maybe add a custom search in wordpress. I saw a lot of posts on how to do this either with my own code and changing my default wordpress search.php or add a plugin so I can save time and effort. I used a lot of plugins for wordpress search but none of them helped me.
The problem
The default wordpress search is fine. But what happens If I want to have a search form according to the custom fields we set? What happens If I want this search on any page? And ofcourse with the click of a button we are redirected to the results page.
The Tutorial
We create a search form which contains one or more fields and with the click of a button we are redirected to a results page. If you want to learn how to develop a search results page with Jet Engine and Jet Smart Filters visit this tutorial.
Specifically in this tutorial I use the tools below:
- Elementor Pro
- Jet Engine
- Jet Smart Filters
to create pages, custom fields, and filters. There is no need to own those plugins because the basic idea is the same and can by applied to any wordpress site that uses custom fields.
Before we continue i must mention some great google results for custom wordpress search with multiple criteria:
- Stack Overflow: click here
- Search & Filter Plugin: It’s a good and free solution for a wordpress site. It adds any kind of filters in your page where the archive is, but what happens if i want my search and filtering in the homepage? with the archive on another page? click for details
- Toolset & Toolset Views: This paid plugin can help you solve the filtering and custom search problem. details
Before we get started…
If you do not own the above plugins and you are ready to buy them , use my affiliates link below. You will not get a discount but I get a commission so I will keep posting tutorials like this. Cheers!
Elementor Pro link : https://elementor.com/?ref=10773
Jet Engine Link : https://crocoblock.com/plugins/jetengine/?ref=1360
Jet Smart Filters Link: https://crocoblock.com/plugins/jetsmartfilters/?ref=1360
Solution
The first step is to find the url of the results page. It can be of the form,
yourdomain.com/advanced-search/?keyword=&country=&state=&location=&area=&status=&type=&min-price=€1.000&max-price=€4.500.000 or
yourdomain.com/?s=restaurant
First we need to create the form with the fields. In this example we will have two fields and a search button. We can add as many fields as we like. So we add the following code to any page we want. If you are using a builder then choose the html code widget and add the code below.
<p><form method="POST">
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" value="Search" name="go" method="post">
</form></p>There are two ways the browser client can send information to the web server.
- The GET Method
- The POST Method
Before the browser sends the information, it encodes it using a scheme called URL encoding. In this scheme, name/value pairs are joined with equal signs and different pairs are separated by the ampersand.
name1=value1&name2=value2&name3=value3
Spaces are removed and replaced with the + character and any other nonalphanumeric characters are replaced with a hexadecimal values. After the information is encoded it is sent to the server. We are going to use the POST Method to send data information via HTTP headers.
field1, field2 are the fields that we will use. We get the user input from those fields. These fields could also be select or anything else. In this example we use text.
So when we press the Search button the name go is set. We need some php code to check if the go is set. I use Snippets plugin to keep the code clean. You can also add this code to the additional page without function declaration.
We implement the checkForPost function, copy and paste the code below:
function checkForPost(){
if($_POST){
if(isset($_POST['go'])){
$field1 = $_POST['field1'];
$field2 = $_POST['field2'];
$result1 = getIdbyName($field1);
$result2 = getIdbyName($field2);
filter_results($result1,$result2);
}else{
return "Error";
}
}
}Ιn the code above we pass the data provided by the user and call the getIdbyName function which we will implement next. It accepts the value of the field as an argument and returns the id stored in the database.
Important Note: If you aren’t using Jet Smart Filters you don’t need to replace name with the term_id so you do not need getIdbyName function at all.
Νow that we have the id we call the function that accepts these ids and create the url for the result page.
But how do we run the checkForPost() function?
On the same page where we put the html form we put the shortcode: [submit_shortcode]. We declare this shortcode in our php code snippet like this
add_shortcode('submit_shortcode','checkForPost');Here is the getIdbyName code below:
function getIdbyName($name){
global $wpdb;
$result = $wpdb->get_var( $wpdb->prepare( "SELECT term_id FROM `wpw5_terms`
WHERE name = %s;", $name) );
return $result;
}This code will vary depending on the project.
We use global $wpdb; to access the wordpress database.
The select query will vary depending on the database name so wpw5_terms is yourdb_prefix_terms.
If you got multiple taxonomies with the same name use the sample code below. If you don’t, skip this step
function getIdbyName($name){
global $wpdb;
$result = $wpdb->get_var( $wpdb->prepare( "SELECT a.term_id FROM `wpw5_terms` as
a,`wpw5_term_taxonomy` as b WHERE name = %s AND taxonomy = 'geographical_position' AND
a.term_id = b.term_id;", $name) );
return $result;
}This code will vary depending on the project.
We use global $wpdb; to access the wordpress database.
The select query will vary depending on the database name so wpw5_terms is yourdb_prefix_terms and wpw5_term_taxonomy would be yourdb_prefix_term_taxonomy.
geographical_position is my custom taxonomy which is stored in _term_taxonomy database table. geographical_position is made with Jet Engine Taxonomies option. It could be developed with code or with another plugin like, Advanced Custom Fields(ACF), ToolSet, etc.
Last Step
function filter_results($value1,$value2){
$prefix = '?jet-smart-filters=jet-engine/default';
$field1 = '&_tax_query_geographical_position%5B%5D';
$field2 = '&_tax_query_geographical_position%5B%5D';
$queryString1 = "$field1=$value1";
$queryString2 = "$field2=$value2";
//output: http://domain.com?foo=bar&baz=boom&cow=milk&php=hypertext+processor
header("Location: https://aggeliesellada.tk/aggelia/{$prefix}{$queryString1}
{$queryString2}");
}Jet Smart Filters use a prefix before the filtering starts. We declare that in the $prefix variable. Next we declare the search field in our case is _tax_query_geographical_position% 5B% 5D because we search by geographical_position(our custom taxonomy, it could be just categories).Don’t forget to use & before the search field like this &yourfield.
In the example above we want these posts that have geographical_position equal to value1, value2.
Every $queryString will have the form, field = value. Here we have two such variables since we have two fields in the original form.
if you don’t use Jet Smart Filters imagine the query could be something like that:
$queryString = foo=bar&baz=boom&cow=milk&php=hypertext+processor
//output: http://domain.com?foo=bar&baz=boom&cow=milk&php=hypertext+processorFinally we create the query with our domain result page, prefix and queryStrings.
Don’t forget to change the redirection line
header(“Location: https://aggeliesellada.tk/aggelia/{$prefix}{$queryString1}
{$queryString2}”);
with
header(“Location: https://yourdomain.com/resultpage/{$prefix}{$queryString1}
{$queryString2}”);
The Whole Code
function checkForPost(){
if($_POST){
if(isset($_POST['go'])){
$field1 = $_POST['field1'];
$field2 = $_POST['field2'];
$result1 = getIdbyName($field1);
$result2 = getIdbyName($field2);
filter_results($result1,$result2);
}else{
return "Error";
}
}
}
add_shortcode('submit_shortcode','checkForPost');
function getIdbyName($name){
global $wpdb;
$result = $wpdb->get_var( $wpdb->prepare( "SELECT term_id FROM `wpw5_terms`
WHERE name = %s;", $name) );
return $result;
}
function filter_results($value1,$value2){
$prefix = '?jet-smart-filters=jet-engine/default';
$field1 = '&_tax_query_geographical_position%5B%5D';
$field2 = '&_tax_query_geographical_position%5B%5D';
$queryString1 = "$field1=$value1";
$queryString2 = "$field2=$value2";
//output: http://domain.com?foo=bar&baz=boom&cow=milk&php=hypertext+processor
header("Location: https://aggeliesellada.tk/aggelia/{$prefix}{$queryString1}
{$queryString2}");
}Conclusion
We have created a custom search with multiple fields that can be customized to any wordpress project. The basic idea is the same whether you use Jet Smart Filters or not.
You must have created a result page before you can do the above. That is, an archive with all the posts that will be filtered according to user inputs. Learn how to implement a result page with Jet Smart Filters here.
If you like this post and was helpful for you leave a comment down below and share it so other people can have custom search with multiple fields in their websites.
Also, If you do not own the above plugins use my affiliates link below. You will not get a discount but I get a commission so I will keep posting tutorials like this. Cheers!
Elementor Pro link : https://elementor.com/?ref=10773
Jet Engine Link : https://crocoblock.com/plugins/jetengine/?ref=1360
Jet Smart Filters Link: https://crocoblock.com/plugins/jetsmartfilters/?ref=1360