Add Google custom search API to your WordPress search

If you’re using Google AdSense, you will probably know about Google custom search API. If you don’t like the WordPress built-in search feature and you would like to implement Google custom search to your WordPress theme and you don’t know how.

Don’t worry, I’m going to teach you to do that. I will try to do this a simple as I possibly can in a step by step easy and to follow instructions. In this tutorial, I will be using Twenty Eleven 1.2 theme.

Reason being the simplicity of the theme itself. Easy for me to demonstrate how to add the Google custom searchbox since the theme already have a ready made searchbox and an extra php template needed for this tutorial. For other themes that doesn’t have a searchbox, you need to manually create and style your theme and add new css to it . I will write that tutorial later on.

This going to be a lengthy tutorial. 😥 Okay, here goes…

There are 2 things you will need:

1. Google custom search codes (click here if you’re not an AdSense publisher yet) [1. There are 2 codes to be added to WP search box and search results page]
2. Exclude Pages plugin (download at WordPress.org or Author) [2. This plugin will hide search results page and title from your navigation menu bar. It’s pointless to have a page when your curious readers clicking on it and find out it’s just an empty page. Besides, search results page only works when your readers using the searchbox to search your blog.]

1. Getting Custom Search Engine Codes

First let’s get the searchbox and search results codes.

Go and log in to your AdSense page. Click on My Ads tab -> Search -> Custom search engines -> +New custom search engine -> new creation page will appear titled Create new custom search engine.

Your settings page should be like the example shown below. Just follow what I have suggested for you. You can experiment with the settings later. We’re going to do some modifying to the codes and adding it to the searchform.php and creating new template page for the search results.

After you have set all the settings, save and generate the codes. You will get something like the one shown below. Keep these codes by pasting in your Notepad or Wordpad and saving it. We’re going to need this afterwards.

SearchBox Codes

<form action="http://myblog.com/search" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="40" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
<script type="text/javascript" src="https://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en"></script>

<script type="text/javascript" src="https://www.google.com.my/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

Search Results Codes

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