HMTech.ca

May 04 2010

How to Add a Google Custom Search Box to your Blog

Filed under: Technology, Tutorials by: brennan

In this post you will learn how to create, customize, and implement a custom Google search box in your WordPress sidebar.

Building your own custom Google search box allows you to harness the power of Google’s search technology and apply it to your own blog. You’ll notice my custom search box positioned there at the top right of my site. Go ahead and give it a whirl to see how it works. You’ll notice that the results returned by Google are specific to only my domain and formatted to match the colors of my theme. The layout and coloring can be adjusted to match your blog, as you’ll see in the step-by-step guide below.

Step 1: Head over to www.google.com/cse/ and click the button “Create a Custom Search Engine”

If you do not have a Google account you will have to create one. Otherwise, sign in with your email address and password.

Step 2: Fill out the basic information like the new search engine’s name, description (not required), language. This is also where you specify which sites your custom Google search engine will search.

In this example I’ve set it to search only my site, but you could add more sites to the list. Click “Tips on Formatting URLs” for more information.

Step 3: Select the edition (Standard or Business), read and agree to the terms of service, and click the “Next” button.

The standard edition is free and ad supported. You can link it to your AdSense account to earn money (more on this later).

At this point you will have a chance to preview your custom search engine. Test it out, just for fun, and then click the “Finish” button.

*** Note: The first time I previewed mine, the results were not specific to my domain. However, I continued anyway and the preview began to work properly in the Control Panel.

Now you can customize the “Look and Feel” of your new search engine and generate code for your website.

Step 4: Enter the Control Panel under “My search engines”

Step 5: Select “Look and feel” from the Control Panel (left side of the page)

There are a few ways to host the search results. In this example, I chose the iFrame option, which allows you to have a search box in the sidebar and display the results in the main pane.

Step 6: Select “iFrame” under “Choose a hosting option”

Depending on the theme and color of your website/blog, you may have to change the default color scheme of the search box and results page. If you don’t need to customize, then skip to step 9.

Step 7: Click the “Customize” button under the default style.

Step 8: Determine which colors/fonts need to be customized

In my case, it was necessary to modify the colors of the search box and search results to match my theme. I changed the border color and background color under the “Global Styles” tab. I also changed the Link, Visited, Hover, Active, Snippit Text, and URL text colors under the “Results” tab.

In order to fill these colors in correctly, you will have to open your CSS stylesheet in WordPress and locate the colors for your background, text, and links. For further information on how to do this, read this.

Customized Colors

When you’re finished customizing, click the “Save” button.

Step 9: Click the “Get Code” button (or select “Get Code” underneath the Control Panel)

In this section, you must enter the name of the page where your search results will be displayed.

If you have not yet created a page for your search results (I had not), then login to your WordPress Dashboard, click “Pages” on the left, and create a new page. I titled mine “Search Results”, as you can see in the above screenshot.

If you do not want the new page to show up as a button on your website, check out this article to learn how to hide it.

Step 10: Copy the Search box code and paste it into a text widget on your WordPress sidebar.

To create a text widget:

- In WordPress, click on “Widgets” under Appearance

- Drag a text widget into the sidebar

- Title the text widget “Search”

- Paste the code into the body of the text widget

- Click the “Save” button

If you refresh your website, you should now have a (custom) Google search box in your sidebar. It won’t be functional until you enter the Search results code into the WordPress page you created in step 9.

Step 11: Copy the Search results code into the WordPress page you created in step 9.

Make sure you are editing the page in HTML, not visual, mode.

After pasting in the code, update the page.

Step 12: Test it!

You should now be able to enter search terms and see the results in the main pane. If the coloring or font doesn’t match your theme, revisit step 8.

If your lucky, it will look perfect. However, if you’re most other people, you will run into a problem or two.

Potential Problems

Here’s the first problem I had (custom Google search results too wide):

As you can see, the iFrame which displays the results was too wide and some of the Google text appeared underneath my sidebar.

To resolve this issue I did what most people do, search Google.

An answer in this forum suggested that I change the FORID value in the Search box code from 10 to 11, allowing the iFrame to have a minimum width of 500 pixels.

I then edited the iFrame width in the Search results code to match the width of my main pane (in this case, 680 pixels – found in the CSS stylesheet).