 In this particular video, I'm going to show you how we showcase things on the front end. We need to have this input field right here and this search button so that when I use a type scene, we are able to get that information that they have typed. When they click the search, then we should be able to get that information, process it over the API, and then display the results on our front page. Now, in WordPress currently, you either have to build what is known as a block and by that, I mean if you go to one of your pages and you go to, let's say, this sample page, you will see that we have blocks that are here and I can actually delete this. Or if I click, you're able to find a block right in here. Now, there's also another block called a shortcode, which allows you to add the traditional shortcode and probably you've used some of these. So let's say I have this takey press domains as a shortcode. So when I click update here, if I choose to go and preview the page, I should be able to see something like this. Now, in our case, we're going to use this shortcode technology to be able to display a form like the one we have here and then do different things with it. So if you are ready, let's jump into the code. Now, we've already created this shortcode and added it in here, but it's going to just display as text here, because this does not have any particular meaning to WordPress. But if I copy these texts that we have here inside the square brackets, and then I can write some code, you're going to find that we have something that is new. So let me go back to my code. I'm going to open up my editor and I'm going to use a function which is called add shortcode. Now, you might ask me, where are you getting this function called shortcode from? How did you know that it's the one that's being used? Well, that is relatively searchable. If you go to the WordPress.org and you look for the developer documentation in here, you'll be able to see that there is something called a reference. So I'm going to go to the developer.wordpress.org, look up the reference, and inside here, I can be able to search for anything. So I can say, let's search for shortcode. You're going to see that we have these different functions, do shortcode, add shortcode. And you'll see there is a little description of what actually happens. So if I click on the add shortcode, because I want to add a new shortcode, it gives me a description of what is going to happen. It gives me the parameters that I expected. For example, this expects a tag, it expects the callback function. And in here, if you keep on scrolling down, in most cases, you're going to find an example of the code of how to use this. And you can actually just copy that, put it in your code, and then iterate over it and make it do what you want it to do. So let's just go back into our code. And then we'll continue writing this straight off our backs. It allows you to add what is known as a tag as the first parameter or argument. And then after that, you're able to add a function in here. And this can be an anonymous function. Or you can actually use what we call a named function. Remember, every PHP code needs to be closed with a particular semicolon. Now I'm going to move this function from here. And I'm going to add a new argument in here. And I'll call this add input form. I'm going to come down here and I'll add this new function. So I'll add our function code here. And I will say this is the function with this name. Once I do this, I'm going to add some little spacing to allow us do our WordPress coding standards. You realize that this function that we've just written here is being referenced here. So add short code is the WordPress way of saying we have this short code called take a press domains. And this function here is going to tell us what we need to do in that particular short code. So I'm going to say return. And for every short code, you should always return do not echo stuff, you return your result. And I'm going to say results here. Put a semicolon to say, okay, this is what the function does. It just returned something called results here. And I can actually wrap this and say, let me wrap this in a paragraph tag so that we can have proper HTML on the front end. So I'll click save here or control seven, my keyboard, or you can just come and click save here. I'm going to go back and preview this in my browser. And if I reload this, you're going to see that now we have results here is showy. So I'll go back to my editor. And I'm going to just do something like this. So I'm going to have a variable, which I will call form. And I'll say form is equal to and I'm just going to have some generic form stuff. This is all HTML. Remember, I told you that you require to have HTML as knowledge. And inside that form, we're going to add an input field. And we shall say this is a type of text. We shall say our value. This input field has a value which is empty. And then we can say its name is going to equal to domain searcher input. And if I am to fix this HTML, right, put a semicolon here, I'm going to say at the end of that day, let's return this variable called form and replace it here instead of this text. So I'm going to save this. I'll come back to my browser. If I reload this, you're going to see that we have a form field right here. And if I inspect this in my browser, you're going to see that we have our form, we have our input with the name of domain searcher input with a value that is broken because I've not fixed this right. So I'm going to go back to my code and make sure that is right. The value is this. It's empty. I need to close this text right here. And then inside this form, we are going to have also another input field, which I'm going to make a type of submit. And of course, the value will be search because that's what we want to have. And then we can just call this domain search, searcher submit. And basically, let's just add a class to this. And also we'll add a class to the other one so that we can be able to style it with CSS. So I'll just use the same name as the name that we have here. I'm going to wrap this so that we can see all the code. You can actually just press enter here. In PHP, this space doesn't matter. It will be fixed. So we have our input. We have our form right here. This is looking much better, much cleaner. I'll save this. I'm going to go back into the browser. If I reload here, you're going to see that we have our form showing up. It doesn't do much. But when we click it, you'll see that our URL changes meaning this is responding to some kind of check. So if I say checking as a word, click search, you'll see that it comes back with this parameter in our domain right here. It has this parameter and it has the search word which is called checking. So we're going to trap this and use things like Ajax in our JavaScript to be able to display the different results that we get here from our particular API search. So I hope you've enjoyed this video. Give it a thumbs up if you liked it. Let me know of any questions that you do have in there. Try to play around with different things to make sure your shortcode is doing what you want. And then once you're done with that, we will be able to move to the next part where we are going to get stuff from our API. So for the first time, we're actually going to query our API with information, bring it to our shortcode, display it, then we'll be able to tie the two together in the next video.