Create a custom search form and manage your search results page in a WordPress theme Practical application (5) for developing a WordPress template

In today’s article in the series on building WordPress templates from scratch, we will work on adding a new feature to the WordPress template that we are developing, which is enabling search in site content and displaying search results on a dedicated page within our template.

WordPress includes many ready-made functions built into it to manage the search process flexibly, and today we will learn how to take advantage of these functions that enable us to add a search form in your custom template to appear in the site header or anywhere else we want. You will also learn how to customize the way search results are displayed.

By the end of this article, you will be able to create a new template file in your template called searchform.php through which you can create a custom search form in WordPress and call it and format it easily and flexibly. You will also create another template file called search.php whose task is to customize the search results page and format the page that displays the search results in your location.

Firstly. Add a search box to the template header

The usual place to add a search box block or search form is usually in the site header or sidebar of the site . In our current article, we will add the code for the search box within a separate file within the template and call it in the desired place within the header file header.php.

In the following image, the structural framework that shows us the initial design of the search form and the search results page is as follows:

Follow the following paragraphs to learn the steps necessary to achieve this design in our template, step by step.

Step 1. Create a custom file for the search form searchform.php

Before we create the search file for our template, it must be noted that WordPress includes a default search form embedded in it, and you can easily use this form in any template file you want without the need to create a special form file, through the ready-made function in WordPress get_search_form () that displays the search form. On site.

This function displays, as we mentioned, the default search form included in Core WordPress (which is HTML5 form code if our template supports HTML5, otherwise it displays an HTML4 form) if you do not add any custom search form template file named searchform.php in your template folder. current or in the parent folder of the current template

This function get_search_form() is defined in the file genetal-template.php within the wp-includes directory in Core WordPress. If you examine how the function works, you will find, as we mentioned, that its default output is a simple HTML form similar to the following figure:

As shown in the code above, the search form uses the method property to specify the method of sending form data to the specified page within the action property . This property takes either the value get , which means sending the form data in the form of variables (name and value) within the URL link, or the value post , which It means sending form data inside the body of an HTTP request and not appearing in the URL. It is useful for sending sensitive and important data such as passwords.

After that, WordPress creates a search text box in the form and calls it “s”, then creates a simple search submit button whose task is to send search data for the search query.

You will need to create a custom search form if you want to make any change to the way this default search form works or add your own fields to it, which is what we will do in our current template. We want to create our own search form file and do not rely on the default form, so we create a file. New in the template folder and we call it searchform.php and write our search form code in it.

In the code that we will write in our searchform.php file, we will add to the action description the call to the function home_url() and pass to it the argument ‘/’ so that it brings us the link to the site’s home page followed by the slash http://www.example.com/ and send it the form data in the following form:

note:

There is a get_search_form filter hook that can be applied to the search form if you want to edit the HTML code of the default form. There is also an action hook that is called when the function is run and before retrieving the search form, which is the pre_get_search_form hook . This hook is useful if you want to execute JavaScript codes when performing The process of searching for or applying specific formats.

Read more: Explanation of WordPress Hooks and their importance for theme and plugin developers

Step2. Display the search form in the header

The next step is to display this search box in the site header, so go to the header.php file in your theme and call the get_search_form() function before the closing </header> tag to display the form you created in the previous plan as shown in the following code:

Now, if we view the front end of the site in the browser, the search form will appear in the header, as shown in the following image.

As you can see in the previous image, the form appears in a primitive design, and it requires some formatting to appear compatible and harmonious with the design of our custom template, and this is what we will do in the next step.

Step3. Search form format

We will now add some formatting rules to the end of our template’s style.css file to display the search box properly. Edit the file and add the following code to the end:

Save the file and browse the site again and you will see that the search form has become elegantly formatted as follows:

Second: Customize the search results display page

At this stage, we have to create a custom template file responsible for displaying the search results, and we format this file according to the requirements of our template as follows.

1. Create a custom search.php template file for the search results page

Since we specified through the action attribute when creating the search form that the results will be sent to the url of the home page of our site through the home_url() function and we chose the GET method to send it, this means that when searching for a word, let it be a tree, the results will appear on the page located at the following link in the browser window. :

Whether you use the default search form in WordPress or a custom search form to search for a specific thing on your site, WordPress will display the search results on this page based on a template file named search.php if it is located in the root folder of your theme directory.

If you have not yet created a file with this name in your theme, WordPress will, as usual, use the main template file index.php to display the search results page.

In our template, we will create a search.php file and use different code to display the search results so that the design looks different from the blog page or home page.

According to the wireframe for designing the search results page, we must display the page title at the top, then display the list of results returned by the search query in the form of (the title of the article, a brief description of the article, and a link to read more), and at the bottom of the page is the navigation list for the results pages as follows.

As for the page title that we will display at the beginning of the search.php file, it will be static text with dynamic text that includes the phrase that the user inquired about.

In order to achieve this, we will rely on the $found_posts hook and call it through an object in the wp_query class to obtain the number of total search results. We will call the ready-made function the_search_query() , which returns the value of the query variable that the user entered in the text box of the search form.

reminder:

WP_Query is a programming class written in PHP included in WordPress that helps us easily perform queries from the WordPress database without the need to write detailed SQL queries. It returns articles, pages, or other custom objects to us and enables us to display them on the page.

Then we need to go through the WordPress loop to fetch the search results from articles or pages and specify the information we want to display from them, similar to writing the code for the index.php file , but with some modifications in the loop code.

Finally, we display navigation links (next results and previous results) if the search results will be displayed on more than one page through the two ready-made functions in WordPress  previous_posts_link  and  next_posts_link .

The full file code becomes as follows:

2. Formatting elements for the search results page

The final step we need to do is to add a little CSS to our template’s style.css file. To display the search results as desired, edit the style.css file and add the following code to the end:

With this, we have finished adding the search feature to our custom WordPress theme, and our results page will appear as follows:

If no result is found, an explanatory message will appear to the user as follows:

Conclusion

In today’s article, we learned how to add the custom search feature to our WordPress template, and we initially explained how we can display a search box in the site header, that is, anywhere we want, through the ready-made function get_search_form () that displays a default or custom search form that we can create by adding The required form code for the searchform.php file in our template and dispensing with the default form.

We also explained how to customize the search.php template file in order to display search results. Otherwise, the default index.php template file will be used if it does not exist. Finally, we added the necessary formats to display the search form and results page according to our design needs.