Adding A Google AdSense Custom Search Engine To a WordPress Blog

Last week, I talked about why I like Google AdSense for Search and offered some setup tips. This week, I’ll show you how to integrate this code into a standard WordPress blog.

Note: You’ll need to know HTML to complete this exercise, and be basically familiar with the WordPress theme editor (found under the “Appearance” menu). I would rank this as an “beginner/intermediate” level tweak. You can’t really screw anything up as long as you have a backup of the original search form, so there’s no harm in trying.

P.S. – This won’t work for WordPress.com users.

P.P.S. – The written tutorial was updated as of November 6th, 2011. If you find that the code doesn’t exactly match, you may still find the instructions useful. Conceptually, the process is the same regardless of the exact code.

Step 1 – Grab the Google Adsense for Search Code

Follow the directions from last week’s post to grab Google’s code (btw, when I say “grab” the code, I mean copy it into a text editor).:

<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-xxxx" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<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&amp;lang=en"></script>

Let’s break this up line-by line:

<form action="http://www.google.com/cse" id="cse-search-box">

This is one of the most significant pieces of code, because the form id – “cse-search-box” – is referenced by Google’s watermark javascript (the two have to match) and because it tells us the form’s “action” is on Google.com.

<div>

This tag – and the closing </div> tag to match it – are nothing more than a placeholders. You don’t need them to comply with Google, so we’re going to ignore them. If your theme’s existing search form has DIV tags, copy them over and ignore the Google DIVs.

<input type="hidden" name="cx" value="partner-pub-xxxx" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Search" />

The first <input> tag contains your AdSense publisher ID – “partner-pub-xxxx.” I’ve changed the code out so that no one gets confused, but the XXXX will represent your specific ID. The second <input> tag is nothing more than a character set declaration. The third <input> tag is the search query box itself. Google defines the length of this form as “55″ characters, and names the box “q”. Finally the last <input> tag is the code that creates the “Search” button we click on.

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

Last but not least is the javascript watermark script. The script src tag has a dynamic variable portion that we need to pay attention to later. For those who don’t know, that’s the portion of the javascript source URL prefaced by a ‘?’ (question mark) but before the “&”, i.e. “?form=cse-search-box”.

Grab Your Blog Theme’s Search Form Code

Because of all of the themes available on the market, this portion may not match your particular website. I’m going to use the simplified search form found in the Twenty Eleven theme because it’s packaged with the basic WordPress install and also a popular theme on WordPress.org.

Under your blog’s appearance menu, you’ll see a link for “Editor.” The editor will open to the active theme’s main CSS stylesheet, and on the right side of the page you’ll see anywhere from 10-20 file names listed. You’re looking for the one that’s called “searchform.php” or “Search Form.” Here’s the searchform code from Twenty Eleven:

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
</form>

I’m not going to break-down every line (because there’s some duplication), but I *am* going to point out the key differences below:

1. Change your theme’s search form “action” and “method” to match Google’s code.

The opening “form” tag for Twenty Eleven reads like:

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">

We need to change the action to match the google form code’s action and we need to delete the method="get" portion.

Change the search form's method, action, and id.

The key here is to change the method and action of your theme’s existing search form while preserving the existing CSS style. We don’t want to change your form’s class or id settings.

2. Fix the form id so it matches up with the javascript variable.

If your theme’s search form does not have an “id” setting, all you need to do is add id="cse-search-box" inside the opening form tag.

You’ll recall that the javascript tag at the end of Google’s form code references the form id. SO, if your theme’s form already has an “id” tag, you’ll need to change google’s javacscript to match. For the Twenty Eleven theme, you need to change the variable in the javascript code. The final code will look like this:

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchform&amp;lang=en"></script>

3. Add the hidden inputs from Google’s code to your form code.

This is easy – just take the two “hidden” inputs (one with your publisher ID, one that identifies the character set) and just add them to your theme’s form.

Add the two hidden inputs

4. Name the search box “q” and the submit button “sa”.

In Twenty Eleven, the search box is already named “s” and the submit button is named “submit”, but we need to change them. In this particular instance, changing the names of the search box and submit button will not impact the look of the form. However, changing the name in some themes will cause the form to change appearance. The solution is to change the CSS so that it applies to the new input name.

If your theme assigns style to these elements by name, simply search your theme’s CSS file for the name and change the name on both the search form and in the CSS. In Twenty Eleven, the search form input has style assigned to the ID “s”, but since we’re not changing the id (just the name), we don’t have to worry about this. As for the input button, we’re OK here too. The style is assigned to the id “searchsubmit,” and since we’re not changing that ID, we don’t have to worry about that either. Still, you should double-check the CSS references for yourself.

5. Add the javascript after the closing <form> tag.

Add the script tags after the closing form tag

Easy.

The final code:

<form id="searchform" action="http://www.google.com/cse">
<label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
<input type="hidden" name="cx" value="partner-pub-xxxx" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" class="field" name="q" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
<input type="submit" class="submit" name="sa" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchform&amp;lang=en"></script>

When you’re all done, your theme’s search form will look the same way as before, but it will use Google’s AdSense for Search rather than the limited search engine provided by WordPress. Enjoy!