Viewers: in countries Watching now:
Our header is now almost complete. We have our site title and tagline, an option for a custom header image, a nicely styled menu that is accessible and responsive, and an optional social media menu. The only thing that's missing is a search form. Giving the visitor the ability to quickly search the content on your site no matter where she enters the site and what she's looking at is important. Unfortunately, search is often relegated to the side bar like you see here, and that's problematic when you have smaller screens because the side bar gets pushed to the bottom.
And now, my search is really far down on my page and hard to get to. To make search immediately accessible to the visitor, I always place a search form right in the header. The problem, of course, is that search forms are huge, and they take up a lot of space. So the trick here is to figure out a way of adding a search form in the header that doesn't take up space if it's not needed. And, there's a solution to this, and you can see an example of it in the 2014 Theme. If you ever used 2014, you know that in the far right hand corner, of the main menu, there's a search loop.
And if you click on it, it opens the search form. So here you have a search form that's not obstructive and doesn't displace other content, and it's also nice and responsive. So this is what we're going to do. We're going to add a little search loop in the main menu, and when you click it, it opens a search form. And we'll do this in steps, so we'll start by adding the search form itself. The search form, of course, goes in the head.php template. So I'll open header.php, and here I want the search form to appear on a separate line after the main navigation.
So I'm going to place it under nav. First I'm just going to put in the search form because WordPress generates search forms automatically if you ask for them. So I'll put in a PHP deliminator, and just say get search form. And if I just save header.php now, jump back to my browser, and reload the page, you will see the search from up here is right here. Of course, it's shifted to the left, and that is a gigantic button I don't need, but the search forum appears, and it will now work perfectly on my site. So what I need to do now is wrap the search forum in some containers, so I can position it where I want, and I also want to apply some styling to it that, among other things, make it bigger, change the font, and get rid of this pesky search button that I don't need.
So if you go to the code snippets for this movie, you'll see at the beginning I have this extra code that's wrapped around the header search form. If you copy out that code, go to header.php, and paste it in, in place of just this get_search_form, you'll see that this is the same function get_search_form and I've just wrapped it in two containers. So here we have an outer most container with a class search-box-wrapper and the ID, search-container. And I also have an inner container, which just has the class, search-box.
The reason why I have two containers here is because I want to use one to make space, and then I want to use another to shift the search bar to the side. For now, I'll save the header.php, go back to my browser, reload the page, and nothing happens because now I need to start applying styles to my search form. Now the search form is going to appear where the header is, so I'm going to add it to the header section of my style sheet. So I'll go back to nut beans and openstyle.css, and here you'll remember I added a header section, and I gave it the name xx for now.
So I'm just going to search for xx, and here's the header, and then I'll scroll to the bottom of the header section, and this is where I'm going to add search. Now I'll go back to my cold snippets, and here I prepared some stalls for the search. So first of all, we'll grab this first style here. This one says input type equals search. I'll copy that out and paste it in, and save it, and I'll show you exactly what I'm doing here. So the interesting thing about the search form is that it repeats all over the place within WordPress.
So if you are not specific about what you are targeting and you apply styles to the search form itself, those styles will apply to every single search form on your site. So right now what you're looking at is two identical search forms, one that we just inserted and one that's in the sidebar. And you notice that both search forms are not full width, and that's kind of weird. Well, now that I apply that style and I reload, you'll see that I've set the search forums to be 100% wide, and I've also sent the box setting to be border box.
That means if we add padding to the search form, the padding will increase the size of the search form itself. So, now we can position the search form exactly the way that we wanted to. Next I'm going to apply these two first styles here, search box wrapper, which positions the search form above all other content so nothing can cover it, and also search box, which adds some padding around it and also adds a nice gray background. So I'll copy this out and just paste it into my style sheet. Save again, reload the page, and now you see my search form has a nice gray backing.
Of course, right now, it's very, very large, and it spans across the entire screen, and the search button is still there, and I need to get rid of that one, too. So, we'll do that next. If you scroll down, you'll see we have just two more rule sets here. The first one, which sets the width of the search form, floats it to the right, gives the actual form some padding, sets the font size, and sets the background color for the form. And the second rule set targets the search submit, which is the search button, and what it does is basically hides the button on all pages it appears on by default.
So it appears by default on the error page and on the search page and also in our search box, and I want to just hide the button everywhere on the site. So I'll copy out these two last rules and paste them in. Save the style sheet one last time, and go reload the front page. And now you'll see we have the search form here on the right-hand side. It's the same width as the side bar. There's nice padding inside it, so when you type content inside the search form, it looks okay and it has this nice background.
So next, we now need to add a button to our main menu that will toggle the search form on and off, and then we can hide it by default, so it doesn't take up all this extra space.
There are currently no FAQs about WordPress: Building Themes from Scratch Using Underscores.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.