Adding Google Search to your Wordpress Blog

May 30th, 2007 · Filed under Archives

In an article about helping your visitors to browse your content on Blogging Notes, I explained why providing search is important for a blog. In that article I mentioned that you can even make some money by adding Google Adsense for Search to your website.

Google Adsense for Search can display results of searches on your site or on Google. Contrary to a regular search on your site, Google adds Adsense text ads to your search where relevant. This way your visitors could have more links to click on, which could make you some money.

The simple setup

Login to your Adsense account. If you don’t have one, you can get one here. Click on the Adsense Setup tab and select Adsense for Search. I personally prefer to work on a single page instead of clicking Continue everytime, so I click on the “Single Page” link.

Most of the settings on this page are straightforward. Just go ahead and tweak them to your liking.

The results page

Under More options, you can select how to display the results.They can be displayed on a generic Google search results page, customized to your style (either in the same window or in a new window), or they can be displayed within your site. Let’s look at how you can get the results to display on a page within your Wordpress blog.

First create a new page. I gave mine the title Search. Enter the URL to this page in the box that appears when you click on Open results within my own site under More options. Select a width (minimum of 500 pixels).

In your Wordpress Dashboard, click on Presentation and select Theme Editor. Click on several links on the right to find a template. A template start with something like this:

<?php
/*
Template Name: Archives
*/
?>

Most Wordpress themes seem to have an Archives template, so go ahead and copy the text of that template to a blank Notepad or plain text editor.

Delete anything after the <div id=”content”> tag, but before the last </div> tag. This is where we’ll put our Adsense code.

A little side note: Remember that when you crate a page, it will appear in your list of pages. In this case, it doesn’t matter, because it’s good that your visitors see a “Search” link. However, this page is supposed to be for search results, so they will not see anything when they click the link. We will therefore display a search box, if there was no search performed.

Notice in your Adsense code for your search box that there is a hidden input field added named “domains”. So every time the search form is submitted, a value is added to $_GET for “domains”. We will use this to check whether the form was submitted or not. So let’s start coding.

Below the div with id “content” write the following:

<?php if (!isset($_GET['domains'])) { ?>
<h1>Perform Search</h1>
<br /><br />

Search box code here…

<?php } else { ?>
<h1>Search Results</h1>
<br /><br />

Results code here…

<?php } ?>

Note: use <h1>, <h2> or <h3>, whichever is used in your theme to display post titles.

On your Adsense account page, get the copy the code from the Your search results code box and paste it where I wrote “Result code here”. The same goes for Your search box code. Remember to style the search box for the result page differently than he search box that appears in the sidebar.

Change the Template Name in line 3 to something like Google Search, save the file as googlesearch.php and upload it to your theme folder (public_html/wp-content/themes/your_theme/). From now on changes to this file can be made through your theme editor.

In your Dashboard, click on Manage, then Pages, then click on Edit next to your Search page. While on your editing page, look for the Page Template section to the right and click the + (or whatever button there is) to make it collapse. In the dropdown box you select Google Search or whatever you picked for Template Name.

Save and test! You can customize the look of it by going back to your Adsense account page and changing things around a little. Then you copy the code and paste it in your Google Search template in your Theme Editor.

Notes:

  1. If you don’t have any templates in your theme, you can copy the content of the Page Template (page.php), add the header from the first blockquote on top, and follow the rest of the steps.
  2. I din’t talk about adding a search box to your sidebar, because I think it’s obvious how that would work. The easiest way is to paste the Adsense code in a Text widget and drag it to the desired spot on your sidebar.

If you have any questions or comments about this post, don’t hesitate to either contact me or write it in a comment.

If you tried this out, go ahead and show off your own “pimped out” Google search by providing a link to your blog. This blog does follow in comments, so that’s double the value.


Previous Post: The Recap: Week 1 »
Next Post: I’ll wait for a stable cPanel 11 »

Trackback URL for this post:
http://rehuel.com/2007/05/30/adding-google-search-to-your-wordpress-blog/trackback/

blog comments powered by Disqus