friend of mine told me recently that he was using WPHub to find out how to customize his website. I was flattered however he pointed out that he couldn’t find my search form 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 form used to be on 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.

WPMods Search Box

I, therefore, decided to move the search form to the top of the sidebar. WordPress makes this very easy. You can place a search form 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 form 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”.

How To Style Your Search Form On WordPress

The default search form 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 form to your WordPress website. You simply need to:

  1. Call the function get_search_form(); in your chosen template (e.g. header.php or sidebar.php)
  2. Style the search form adding the input#s and input#searchsubmit classes to your stylesheet

Custom Or Default Search Form On WordPress?

Many WordPress themes use a customized search form 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 form, 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 🙂

Kevin

Related Link:

FREE EBOOK: The Ultimate Guide To Speed Up Your Website and Increase Conversions!

FREE

Site Speed Secretsis a is a step-by-step blueprint about how to speed up your website and increase conversions.

Scroll to Top