A friend of mine told me recently that he was using WPHub to find out how to customise his website. I was flattered however he pointed out that he couldn’t find my search box initially as it was placed in my navbar.
It is sometimes easy to disregard things like this. It was something I never thought would be a problem though you would expect this since I know the WP Mods design well. As you can see from the screenshot below, the search box used to be at the right hand side of the navbar. As it shared the same dark background as the rest of the navbar, some users may have missed it.
I therefore decided to move the search box to the top of the sidebar. WordPress makes this very easy. You can place a search box in your sidebar by simply adding this code to your sidebar.php template:
This function will call your search form your searchform.php template. If you don’t have a search form template (many themes do not including the WP Mods design) then it will use the following code:
This produces a simple search box with ‘Search’ written on the button. If you want something different written on your button, e.g. ‘Search Our Archives’, then you would have to use the full code above as you unfortunately cannot pass any parameters with the get_search_form(); function. All you would have to do is change value=”Search” to value=”Search Our Archives”.
Styling Your Search Box
The default search box has two areas: the search field and the search button. There is a default class for each of these areas; input#s will allow you to style the search field whereas input#searchsubmit will allow you to style the search button.
For example, if you want a search bar 150 pixels in width with a black background you would use:
Similarly, you could create a white button with ‘Search’ written in black by using:
That really is all there is to adding a search box to your website. You simply need to:
- Call the function get_search_form(); in your chosen template (e.g. header.php or sidebar.php)
- Style the search box adding the input#s and input#searchsubmit classes to your stylesheet
Custom Or Default Search Box?
Many WordPress themes use a customised search box however I am a big fan of the simplicity of the get_search_form(); function. It’s easy to add and easy to style. That being said, if you want to extend the functionality of your search box, you will need to modify the search code manually as you can’t pass any parameters to the get_search_form(); function.
I hope you have found this article useful though if you are unsure of any part of it, please let me know and I’ll do my best to help :)