Customising The Default Search Box

in WordPress Tutorials

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.

WPMods Search Box

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:

  1. Call the function get_search_form(); in your chosen template (e.g. header.php or sidebar.php)
  2. 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 :)


Related Link:

Comments (16)

  • Comment by Vijaya Narayanasamy
    Vijaya Narayanasamy

    Really very very useful.Was very worried abt creating search of my own.This trick worked in a second.Again thanks a lot very much..

  • Comment by Ajaypal Bhoreriya
    Ajaypal Bhoreriya


    Have you try this code?

    Select a Category
    $option .= $c->name;
    $option .= ”;
    echo $option;

  • Comment by Amy

    Hi I’m using a child of twenty eleven and would like a search field in my sidebar and to also get rid of the default one in my header/nav bar.

    I know I can remove it from the header or nav bar by clearing out my searchform.php but this fix relies on keeping the searchform complete. Do you have any suggestions for hiding this in the header but keeping the display in the sidebar?

  • Comment by Poptropica

    I just put your code on my new site. Soon you’ll be able to see it on my widget at One thing i change for the result. I exclude the page result so only post are be seen on it. great job admin.

  • Comment by Kevin Muldoon
    Kevin Muldoon

    Hi Orjj,

    That would definitely need a custom script developed for that. I am not sure if it can be done, though it is worth contacting a WordPress developer to see if it can be done. I’m not a developer myself, however I suspect it could be done. I do not know how complex such a function would be.


  • Comment by Orji

    Hi Kevin. Very helpful article, thanks. I would like advice on how to add data in the search function i.e. I would like to add a list of “Approved” companies, so when a visitor visits my site and types their company name in the search field,it will match or return a no match message.



  • Comment by Rahul

    Really very useful tutorial. i was confused where i use css for customization but after read user article i solved this problem :)

    thanks for this post :)

    Rahul Kashyap

  • Comment by Husayn Muhammad
    Husayn Muhammad

    ‘Preciate the article! Very easily (and conCISELY) summed up in those last 2 steps:

    1) Call the function


    2) Style the elements!

    Well done! :)

  • Comment by punzzer


  • Comment by Kevin Muldoon
    Kevin Muldoon

    Can you be more specific about what’s wrong. Perhaps post the code you are using to call the template and the code to style it.

  • Comment by ben hinsdale
    ben hinsdale

    i have problem with the input#s it wont allow me you to style the search field

  • Comment by anupal

    very nice .. thanxx

  • Comment by Shailang


  • Comment by Kenny Fabre
    Kenny Fabre

    thank you for this post I just found out how to customize my search box

  • Comment by Kevin Muldoon
    Kevin Muldoon

    Yeah it calls the form from searchform.php if you have the template but uses the default code if you don’t. It’s very useful.

    It would be great if you could pass some parameters through the function though.

  • Comment by Pippin

    Kevin, some that’s really cool about the get_search_form() function is that you can use it for the default or customized search form. By adding searchform.php to your theme folder, you can set it up however you want and still use that function.