WordPress: How to Add Search Box to Top of Blog Header

This little tip goes hand in hand with another article I wrote titled: WordPress Creating a Custom Social Top Bar for your Blog

Essentially, there comes a time when you would like a better search box on your site (better than the default WordPress one). I have been using the “Google Custom Search WordPress Plugin” for years now, and found it to be ALOT more efficient in finding stuff on my sites.. Best of all, you have some flexibility to move the things around without having to worry so much about PHP coding.

Now the page for some of the coding you will need can be found here
http://littlehandytips.com/plugins/google-custom-search/

Thought to keep things simple, I’m going to give you code and tips on how to get started, after which you can modify to your own needs. The code example I’ve provided uses a simple table HTML code, thus also adding it to the top of your site (above the header)
 

1- Install Plugin
http://wordpress.org/extend/plugins/google-custom-search/

2- Go into DASHBOARD–>SETTINGS–>Google Custom Search

3- Make sure to use the link pointing to the “Search engine unique ID
(you need to set up a free account with Google for your search function to work)
Make sure you’ve added your “Search engine unique ID” to the right of it.

4- For reference I’ve checked “Display results in same window

5- Now SAVE CHANGES

At this point you could easily use the widget they provided (in APPEARANCE–>WIDGETS) to have it sit nicely in your WordPress Sidebar, though for this article I’m wanting to place it at the top of my site

6- Open up file “header.php” now find the part in code where it says  </head>

7- Place my code I’ve provided right beneath this. It  should look like this:

</head>

<!– SEARCH BOX Top of Site //–>
<table width=”940″ border=”0″ align=”center” cellspacing=”0″ cellpadding=”0″>
  <tr>
    <td><?php display_search_box(DISPLAY_RESULTS_AS_POP_UP); ?></td>
  </tr>
</table>
<!– END Top of Site //–> 

8- SAVE OR UPLOAD NEW header.php FILE

_____________________________________________

NOTES:
– You should see the Custom Search box now at the very top of your site!

– Now of course you have a few options.
http://littlehandytips.com/plugins/google-custom-search/

Gives you 3 options for “where” your results show up
(see the section under “Advanced Configuration” )

Just for reference the option I used was:

<?php display_search_box(DISPLAY_RESULTS_AS_POP_UP); ?>

– If you use this “table” method of building a top bar you can easily stick the above code in your table (again see this article and then place the search bar code somewhere in the table)

FINAL NOTES:
I’ve kept this tutorial pretty basic, though any web designer can use this as a starting point and run with it. There are more advanced ways of dealing with “search box” placement, though if you can keep it simple and not have to do alot of coding then your that much sooner in getting what you need done.
Reference Keywords:
– WordPress: Moving Search Box Location to Header
– Custom Search Box for WordPress – easy steps
– Placing Search box at top of WordPress Blog
– How to add Search box to top of Blog
– WordPress: Moving Search Box Location to Header (or custom header location)

Related Posts Plugin for WordPress, Blogger...

4 thoughts on “WordPress: How to Add Search Box to Top of Blog Header”

  1. While searching for “best search box code wordpress”, I come to this page. Your idea sounds good but yet to test it. I’m going to work on it and will let you about my experience.

  2. A formidable share, I just given this onto a colleague who was doing a little analysis on this. And he in actual fact bought me breakfast as a result of I discovered it for him.. smile. So let me reword that: Thnx for the deal with! But yeah Thnkx for spending the time to discuss this, I really feel strongly about it and love reading more on this topic. If possible, as you change into experience, would you mind updating your weblog with more details? It’s highly helpful for me. Big thumb up for this weblog publish!

  3. Hello:

    I have a question, if I want to display the results in a new window, how would be change the code of the form?

    Regards,

    Victoria

  4. Thanks a lot for sharing, i really need search box form for my new site. love to used it, hope it works like a charm.

Comments are closed.