How-to: Integrate Google Custom Search Engine (CSE) in your Wordpress Blog

Let’s face it, while the built-in Wordpress search simply works, there’s something magical about the Google search engine.

In this article, I’ll be showing you how to integrate the Google Custom Search engine kit in your Wordpress blog by replacing the default search engine, and how to do it right the first time.

Step 1. Sign up for a Google Custom Search Engine

Simply jump on over to the Google CSE home page and sign up. Once you’ve filled in the required information, head into your Control Panel and select Get Code. Choose Host results on my website using an iframe and in the Result details box, enter your website’s address followed by /search. For example, mine would be:

http://www.steelfrog.com/search

NOTE: Select the Top and bottomvalue for ads placement. This will place the ads on the top and bottom of the search results rather than on the sides, reducing the minimum required width of your iframe to 500px.

Step 2. Set up the Wordpress Search Template

If it’s not there already, create a blank search.php document and upload it into your Wordpress theme’s directory.

/wp-content/themes/[theme]/search.php

It should appear in your Theme Editor sidebar as Search Results. Copy and paste the information found on your Google CSE Control Panel. It should be similar to the one found below:

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

Include this code on top of your Google CSE code. This defines the page as a Wordpress template file which we’ll need to use later:

<?php
  /*
  Template Name: Search
  Description: A Google CSE template.
  */
?>

Step 3. Setup a Search Page

We now need to setup a search page. We need to have both a template and a single page for this to work. In your Wordpress Pages tool, select Add New. You can leave the page blank but it is vital that you check two values:

1. The permalink is set to www.yoursite.com/search/
2. The page uses the Search template we’ve previously setup

Make sure that the permalink path to this page is yoursite.com/search. If it is not, you are either using other forms or URL formatting. You can change that setting in your Settings panel, under Permalinks. I prefer to use the name value, as follows:

/%postname%/

You can edit the paeg’s permalink by clicking on its box.

We also need to make sure that our Search page is using the Search template we’ve setup. On the right-hand side, scroll down until you see the Template section and select the Search template. This will tell Wordpress to use the Search Results page we’ve created earlier, which contains the results code. Once you’ve double-checked both these options, can can simply save the page and continue.

The Search page does not require any content. The only reason we’ve created a single page is so we can use the yoursite.com/search address, rather than pointing to yoursite.com/wp-content/theme/search.php.

Step 4. Add the CSE Search Box

Now that our search results page is in place, we need to create our search box. In most cases, all you need to do is replace the content of your template’s Search Form page with the search form provided by Google, similar to this one:

<form action="http://www.yourwebsite.com/search" id="cse-search-box">
  <div>
  <input type="hidden" name="cx" value="partner-pub-YOUR ID" />
  <input type="hidden" name="cof" value="FORID:11" />
  <input type="hidden" name="ie" value="ISO-8859-1" />
  <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/coop/cse/brand?form=cse-search-box&lang=en"></script>

NOTE: Please make sure to back up your theme’s search form in case the Google search form does not comply to your theme’s style. You may need to customize the form’s CSS to suit your website. I’ve heavily customized mine to match my website’s theme.

Step 5. Try it out!

Save your settings and test your new search form. Make sure you can access the form by going to www.yoursite.com/search.

Frequently Asked Questions

When I click submit, there are no results shown. The URL in my address bar is mysite.com/search

You are likely using a URL ’shortening’ plugin or script. These are not compatible with the Google CSE as it parses search values through the URL. You will need to disable the plugin or script, or specify an exclusion rule and try again.

My search results are way too wide!

There are two settings you can change, but will still require at least 500px of space to display the results.

On the results page change the googleSearchFrameWidth to 500. In the search form, change the FORID value to FORID:11. The value of 11 changes the ads to appear on the top and bottom of the page rather than on the sides.

My search results are way too narrow!

Customize the googleSearchFrameWidth in the search page. It will accept any width larger than 500px.