Adding Google AdSense for Search 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.

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 id="cse-search-box" action="http://www.google.com/cse">
<div><input name="cx" type="hidden" value="partner-pub-xxxxxx" /> <input name="ie" type="hidden" value="ISO-8859-1" /> <input name="q" size="31" type="text" /> <input name="sa" type="submit" value="Search" /></div>
</form><script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en" type="text/javascript"></script>

Let’s break this up line-by line:

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

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><input name="cx" type="hidden" value="partner-pub-xxxxxx" /> <input name="ie" type="hidden" value="ISO-8859-1" /> <input name="q" size="31" type="text" /></div>

There’s an opening “div” tag, and then the first input. The first <input> tag contains your AdSense publisher ID – “partner-pub-xxxxxx.” I’ve changed the code out so that no one gets confused, but the XXXXX will represent your specific ID. The second <input> tag is nothing more than a character set declaration (not really important for our purposes). The third <input> tag is the search query box itself. Google defines the length of this form as “31″ characters, and names the box “q”. Finally there’s the closing “div” and “form” tags.

<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 atahualpa theme because it’s currently the most 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 atahualpa:

<form method="get" class="searchform" action="<?php bloginfo('url'); ?>/">
<table class="searchform" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchfield">
<input type="text" class="text inputblur" value="<?php the_search_query(); ?>" name="s" />
</td>
<td class="searchbutton">
<input name="submit" value="Search" type="image" src="<?php echo get_bloginfo('template_directory'); ?>/images/magnifier2-gray.gif" style="display: block; border:none; padding: 0 0 0 5px; margin: 0;" />
</td>
</tr></table>
</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 atahuelpa reads like:

<form method="get" class="searchform" action="<?php bloginfo('url'); ?>/">

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

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 (atahuelpa’s does not, for example), 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 (and some of them will), you’ll need to change google’s javacscript to match.

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.

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

In atahuelpa, the search box is already named “s” and the submit button is already 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. I find that most of the time this isn’t an issue.

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

Easy.

The final code:

<form id="cse-search-box" class="searchform" action="http://www.google.com/cse">
<table class="searchform" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchfield">
<input type="text" class="text inputblur" value="<?php the_search_query(); ?>" name="q" />
<input name="cx" type="hidden" value="partner-pub-xxxxxx" />
<input name="ie" type="hidden" value="ISO-8859-1" />
</td>
<td class="searchbutton">
<input name="sa" value="Search" type="image" src="<?php echo get_bloginfo('template_directory'); ?>/images/magnifier2-gray.gif" style="display: block; border:none; padding: 0 0 0 5px; margin: 0;" />
</td>
</tr></table>
</form>

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!