How To Add Google Custom Search To WordPress

• Jonathan
• 23rd Jul 2010
• Tutorials

Let’s face it, as wonderful as WordPress is, the accuracy of the search function is sometimes lacking.

So today I’m going to show you how to integrate Google’s Custom Search Engine into your blog, and make it easier for your readers to find content.

Note: Although this guide is geared towards WordPress blogs it can easily be tweaked to be used on a ‘normal’ site.

Step 1. Signup

Head over to http://www.google.com/cse/ and click the ‘Create a Custom Search Engine’ button. You’ll need a Google account for this.

Now it’s a simple case of filling in the details of your site and search engine.

Note: Google offers 2 versions of CSE: a free one with ads, and an ad free, supported version for $100 per year. Bloggers will probably prefer the free version because the ads can be integrated with AdSense to make some money.

Next you pick the theme for your search results – given that most people will be used to Google’s colouring and formatting I recommend sticking with the default to make to easier to use.

Finally you’ll be given the code to place on your site – BUT DON’T – we want a different type of code snippet.

Step 2. Get the code

Still on the 3 stage of the signup process, click the ‘Look and Feel’ link.

Note: You’re now in the custom search control panel which is where you’ll be able to change more settings, add new sites and search engines etc. later on.

From the 3 hosting option radio buttons select Iframe. Now you can click the Get Code button.

Enter the URL of your results page (we’ll create this in a minute) in the text field at the top. Now the 2 snippets of code are ready to use.

Snippet 1 – the search form

The first bit of code is a simple form for the user to type their query into.

Paste this into the relevant place in your theme’s files, probably the header (header.php) or sidebar (sidebar.php). Don’t forget to upload the changed file.

<form action="http://www.example.com/search-results/" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="005742087588827068492:wxxu9mg2oq4" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

Snippet 2 – the results page

The second snippet will generate the results.

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

To get this onto your blog, login to the WordPress admin and create a new page with a permalink that matches the value you entered when you generated the CSE code. On Division by Zero I used /search-results/.

Switch the page editor to HTML mode and paste in the second snippet. Now save the page.

Try it out

Load up your site and type something into the new search form. Try and pick something from a page that Google has indexed so you get some results.

Style tweaks

You may have noticed the default width for the search results is quite wide – wider than the average content area at any rate.

So to get it under control add the following CSS to your theme’s main stylesheet:

#cse-search-results iframe
{
	width: 602px;
}

Use a width that matches your theme’s content area to limit the width of the iframe and make the results shrink.

If you have a thin content area and the ads on the right are compressing the results too much try changing the ad layout to ‘Top and Bottom’ on the look and feel page of the CSE control panel.

You could probably use more CSS to hide the ads on the free version, but I wouldn’t risk it.

In conclusion

That wraps it up for adding the search to your site. If you’re having any trouble leave a comment below and I’ll try to help.

Or you could just try out the search here on DBZ and use Firebug to see what’s going on.

There’s more to be done with the search engine, such as linking it to an adsense account, or tracking the searches in GA, but that’s a topic for another day.

For now, have fun and happy coding!

Spread the word

If you like what you've read, help spread the word on Twitter, Digg, or any of your favourite social sites. Knowledge is power.

About the author

Jonathan Phillips is the founder and main author here on Division by Zero. A PHP developer by trade, Jonathan spends his days building and marketing websites and the rest of the time coming up with ideas for websites and businesses he hasn't got time to implement.