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
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
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:
<!– SEARCH BOX Top of Site //–>
<table width=”940″ border=”0″ align=”center” cellspacing=”0″ cellpadding=”0″>
<td><?php display_search_box(DISPLAY_RESULTS_AS_POP_UP); ?></td>
<!– END Top of Site //–>
8- SAVE OR UPLOAD NEW header.php FILE
– You should see the Custom Search box now at the very top of your site!
– Now of course you have a few options.
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)
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.
– 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)