Codeable info

Customising The Default Search Box

Posted on by 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:

<?php get_search_form(); ?>

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:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />

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:

input#searchsubmit {

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:

Codeable info

Comments (16)

Comment by Vijaya Narayanasamy says:

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 says:


Have you try this code?

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

Comment by Amy says:

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 says:

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 says:

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 says:

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 says:

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 says:

‘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 says:


Comment by Kevin Muldoon says:

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 says:

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

Comment by anupal says:

very nice .. thanxx

Comment by Shailang says:


Comment by Kenny Fabre says:

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

Comment by Kevin Muldoon says:

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 says:

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.

Codeable info