Want to use Google Custom Search together with WordPress? Here’s how to do that.

You need…

  • A Google Account
  • Knowledge how to create/modify WordPress themes
  • A basic understanding of PHP is also very helpful.

General Considerations

Google Custom Search is similar to a site-specific Google search, much like this:

The advantages of using Google Search:

  • Similar pages are ignored (“In order to show you the most relevant results, we have omitted some entries …”)
  • The translation functions from Google can be used
  • It’s possible to search several websites at once
  • You can puts ads there (if you like)
  • The searches can be very easy analyzed with Google Analytics (if you use that)

But there are also some drawbacks:

  • The layout can be customized but of course only to a certain amount
  • If you add a new post or page it takes some time until it’s included in the Google Search whereas in WordPress search it’s immediately visible
  • The search needs to load external Javascript code from Google, which is not as fast as using WordPress

How does it work?

Of couse you need a Google account, if you have got one, visit Google Custom Search and setup a custom search engine there.

There you set up name, keywords, domain(s) to search, layout customizations etc. for your custom search engine (cse).

As the next step you can choose the hosting type of search: “Search Element”, “iframe” or “Google hosted page”. “Google hosted page” means another window from google.com opens and the results are shown there. “iframe” is what I used: The results are included in a special page on your site. “Search Element” is a new features, here a layer pops up below the search field.

I’ll now show how to include the iframe-search into WordPress.

Integration into WordPress

Note: This assumes you are using your own theme and/or know how to edit WordPress theme files!

Step 1: Choose the URL for the results page

If you use iframe, you have to tell Google where the result will be shown, in my case I simply used /blog/search:

Of course the URL should be inside your blog, preferably a WordPress page.

Step 2: Get the code from Google

After setting up your cse you receive two code snippets from Google, one for the search box – another one for the results page:

Step 2: Setting up a result page

To make things easy, use a WordPress page and call it Search, the permalink has to match the URL you entered in the last step:

..and put the “Search results code” from Google into this page, like this for example:

...
<h2>Google search results</h2>
...
<div id="cse-search-results" style=""></div>
   ..more code from google..
   <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
...
Step 3: Modify the search form

Edit the WordPress theme file searchform.php and insert the “Search box code” from Google there. So it might look similar to this snippet:

<h2 class="widgettitle">Search my blog</h2>
...
<form action="http://YOURDOMAIN/search" id="cse-search-box" name="cse-search-box">
   ..more code from google..
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
...

Now the search widget shows the Google Search field and already is linked to the google results page.

Step 4: Redirecting the WordPress search

One thing is still to be done – the default WordPress search is still present, you could access it by calling: /search/example.

But to be consistent, we redirect this search also to the Google results page. This is a bit more complicated, so I’ll explain this a bit more detailed:

  • First do a search for example using the Google CSE and copy the URL from the result page
  • Take this URL and move the search term parameter (q=..) to the end and remove the term example:

Your result is of course a little bit different…

Now open your main template file (index.php) and insert this code at the top, replacing the URL (inside the single quotes) by the one you created aboved:

<?php if (is_search()) :
   $result_url = 'http://YOURDOMAIN/search/?cx=partner-pub-12345..11&ie=UTF-8&sa=&siteurl=YOURDOMAIN%2F&q=';
   header('Location:'.$result_url.$s);
   exit;
endif; ?>

Make sure, there are no PHP syntax errors (keep a backup of the previous index.php..)

What’s happening here? The is_search()-function is a Template Tag from WordPress, which returns true if the user searched for something. In this case we redirect the Browser to the Google Results page and insert the search parameter from WordPress ($s) into the URL as if the user had used the searchform.