{"type":"PARAGRAPH"

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 on your site.

Contents of the article first. Adding the search box to the template header Step 1. Create a custom file for the search form searchform.php Step 2. Display the search form in the header Step3.

Formatting the search form Second: Customizing the search results display page 1. Create a custom search.php template file for the search results page 2. Formatting elements for the search results page Conclusion First.

Adding a search box to the template header Search form 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 a preliminary design for the search form and the search results page is as follows: Wireframe for designing the search results page. Follow the following paragraphs to learn about 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 the 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) in the event that you do not add any template file dedicated to a search form named searchform.php in your current template folder 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: Search for: As shown in the code above, the search form uses the method property to specify the method of sending the form data to the page specified within the action property. This property takes either the value get, which means sending the form data in variables (name and value) within the URL link, or the value post, which means sending the form data inside the body of the HTTP request and does not show it 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 changes 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 not rely on the default form, so we create a new file within the template folder and 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 sends it the form data in the following form: