Now it’s time to format the search form. Unlike the other widgets, WordPress makes it easy to apply styles and formatting to the search form. You may be wondering why the search form is a more unique widget than the other default WordPress widgets. The default WordPress widgets just provide links to other parts of your site. However, search forms are more complex and vary from site to site. When it comes to design search forms can also appear in various parts of your site. This makes it a reusable component. With that said WordPress recognizes that the search form should be stylized by the theme and not WordPress itself.
If you don’t have any styles or formats available then WordPress automatically generates the HD UML for the search widget. So how does WordPress know if we have a search form template? It’s simple. We just need to create a template called search form dot p p. Let’s create this file now. Inside this template, at the following each CML, you can find the text inside these slash assets slash extra slash search form dot t t file it will contain all the H2 UML and P HP code you’ll need. All right let’s go over what’s in this HCML one by one. The very first thing we do is generate a unique idea for the input fields. This isn’t required but it’s good practice. The unique ideas function helps us generate a unique idea we can pass in a string to pre-open to the ideas.
Then we use the escape attribute function which will make sure the string is safe for use inside an attribute. WordPress provides a set of functions for making sure your data is safe for output. One of these is called The Escape attribute function This will make sure the value can be used inside an H [REMOVED] attribute. I’ll talk more about the various sanitation functions in a future lecture. For now, let’s keep moving forward. Even though creating an I.D. isn’t required I consider it an important step. Templates are reusable. The search form template is no exception to this.
This template can be used multiple times throughout any other template. Since there is a possibility of having multiple search form templates then we want to make sure the input has a unique I.D. each time. This makes it easier to differentiate between forms. Let’s look at the rest of this HCM out. First, we need a form tag. We must set the class method and action attributes. The class should be set to search for the dashing form. This allows for any plugins to add any javascript into this form if needed. You can also add additional classes if you want to. The method should always be set to get as that’s what’s recommended by WordPress.The action attributes should be the URL to the home page. I’m introducing a new function here called home you are out. This is a function provided by WordPress.
We simply pass in a forward slash to instruct it. We just want the route home your URL. We’re also using the escape you URL function to make sure that the euro return is safe and is just that you are out as the other functions. This function is defined and provided by WordPress. You do not need to do anything to make sure it’s available to you. Next, we have to set up the input tag. The name should always be s. WordPress uses this name for something called the loop. The loop is something we’ll go over in a future lecture for now. Just know you should always set the name attribute to s next. The field’s value will be set to the value returned by the search query function. This function simply outputs the search query the user input it. If there is no search query it will just output an empty string so you may be wondering where I’m getting all this info. Well, there’s a function called Get search form which will look for a file named search form dot p p and then output it. Otherwise, this function will generate some default HDL for you.
This function is used from within the search widget in the resource section. I provide a link to learn more about this function. You’ll notice that we’re in the developer site of WordPress something I absolutely love about this site of WordPress is that if you were just searching for a function and scroll down you’ll find a section called Source.
This part of the page will actually show you the source code and WordPress. Let’s examine the source code. A lot of this is mostly unimportant to us for the time being. Further down you’ll find a part of the code that generates a GM out. There are two versions one version is for each team all five and another is for X each team out. Currently, our theme is meant for modern sites and so we’re using the H GM L5 version. What I did was started with this form as a base then I modified it a bit to match the design of my theme. You are allowed to do the same if you wish. There are only four important things we need to set and that is the method action the inputs name and the current search value. You do not need to have every class or HMO as the one-word press generates.
The point of making your own template is to customize it to your needs. Besides the four things, I pointed out earlier everything else is completely up to you. That’s it. Let’s refresh the page and see if the form is formatted correctly. This looks so much better because it fits with the rest of the theme. We haven’t created a search template yet so we can’t actually see the results generated by the search. We’ll be doing that in a future lecture.
One last thing I want to note is that inside the form we’re using a function called underscored E which is similar to the double underscore function. The difference between these two functions is that the underscore e function will echo out the translated shrink rather than returning it. That covers how to create a search form template. Keep in mind that creating this template is completely optional.
You can just let WordPress handle it and that would be just fine. All right I’ll see you in the next lecture. Now it’s time to format the search form. Unlike the other widgets, WordPress makes it easy to apply styles and formatting to the search form. You may be wondering why the search form is a more unique widget than the other default WordPress widgets. The default WordPress widgets just provide links to other parts of your site.
However, search forms are more complex and vary from site to site. When it comes to design search forms can also appear in various parts of your site. This makes it a reusable component. With that said WordPress recognizes that the search form should be stylized by the theme and not WordPress itself. If you don’t have any styles or formats available then WordPress automatically generates the HD UML for the search widget.
So how does WordPress know if we have a search form template? It’s simple. We just need to create a template called search form dot p p. Let’s create this file now. Inside this template, at the following each CML, you can find the text inside these slash assets slash extra slash search form dot t t file it will contain all the H2 UML and P HP code you’ll need. All right let’s go over what’s in this HCML one by one. The very first thing we do is generate a unique idea for the input fields. This isn’t required but it’s good practice.
The unique ideas function helps us generate a unique idea we can pass in a string to pre-open to the ideas. Then we use the escape attribute function which will make sure the string is safe for use inside an attribute. WordPress provides a set of functions for making sure your data is safe for output. One of these is called The Escape attribute function. This will make sure the value can be used inside an H [REMOVED] attribute.
I’ll talk more about the various sanitation functions in a future lecture. For now, let’s keep moving forward. Even though creating an I.D. isn’t required I consider it an important step. Templates are reusable. The search form template is no exception to this. This template can be used multiple times throughout any other template. Since there is a possibility of having multiple search form templates then we want to make sure the input has a unique I.D. each time. This makes it easier to differentiate between forms. Let’s look at the rest of this HCM out.
First, we need a form tag. We must set the class method and action attributes. The class should be set to search for the dashing form. This allows for any plugins to add any javascript into this form if needed. You can also add additional classes if you want to. The method should always be set to get as that’s what’s recommended by WordPress. The action attributes should be the URL to the home page. I’m introducing a new function here called home you are out. This is a function provided by WordPress.
We simply pass in a forward slash to instruct it. We just want the route home your URL. We’re also using the escape you URL function to make sure that the euro return is safe and is just that you are out as the other functions. This function is defined and provided by WordPress. You do not need to do anything to make sure it’s available to you.
Next, we have to set up the input tag. The name should always be s. WordPress uses this name for something called the loop. The loop is something we’ll go over in a future lecture for now. Just know you should always set the name attribute to s next. The field’s value will be set to the value returned by the search query function. This function simply outputs the search query the user input it.
If there is no search query it will just output an empty string so you may be wondering where I’m getting all this info. Well, there’s a function called Get search form which will look for a file named search form dot p and then output it. Otherwise, this function will generate some default HDL for you. This function is used from within the search widget in the resource section. I provide a link to learn more about this function. You’ll notice that we’re in the developer site of WordPress something I absolutely love about this site of WordPress is that if you were just searching for a function and scroll down you’ll find a section called Source.
This part of the page will actually show you the source code and WordPress. Let’s examine the source code. A lot of this is mostly unimportant to us for the time being. Further down you’ll find a part of the code that generates a GM out. here are two versions one version is for each team all five and another is for X each team out.
Currently, our theme is meant for modern sites and so we’re using the H GM L5 version. What I did was started with this form as a base then I modified it a bit to match the design of my theme. You are allowed to do the same if you wish. There are only four important things we need to set and that is the method action the inputs name and the current search value.
You do not need to have every class or HMO as the one-word press generates. The point of making your own template is to customize it to your needs. Besides the four things, I pointed out earlier everything else is completely up to you. That’s it. Let’s refresh the page and see if the form is formatted correctly. This looks so much better because it fits with the rest of the theme. We haven’t created a search template yet so we can’t actually see the results generated by the search.
We’ll be doing that in a future lecture. One last thing I want to note is that inside the form we’re using a function called underscored E which is similar to the double underscore function. The difference between these two functions is that the underscore e function will echo out the translated shrink rather than returning it. That covers how to create a search form template. Keep in mind that creating this template is completely optional.
You can just let WordPress handle it and that would be just fine. All right I’ll see you in the next lecture.
