Tags: , ,

Finally, I could integrate the Google AdSense for Search feature into my WordPress blog. It should have been actually just 2 copy&paste jobs, but doing it the standard way just did not work for me. Whatever I tried, the search result page was empty.


If you already tried and could not get it working, skip the first the sections and go to the third which will explain the trick. If you are about to integrate AdSense for search and want to get it right on your first try, start at the beginning.


So here is how to do it right.

1. Create search results template

Since you want to display the search results on your blog, you will need to create a separate page for the results.
On your webserver go to

  1. /PATH-TO-YOUR-BLOG/wp-content/themes/CURRENT-THEME/

You have to replace PATH-TO-YOUR-BLOG with the actual path to your blog and CURRENT-THEME with the name of the current theme you use.


In this directory, create a file named

  1. google-search.php



Insert the following code into this file

  1. <?php
  2. /*
  3. Template Name: google search results
  4. */
  5. ?>
  6.  
  7. <?php get_header(); ?>
  8.         <div id="content" class="narrowcolumn">
  9.                 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  10.                 <div class="post" id="post-<?php the_ID(); ?>">
  11.                 <h2><?php the_title(); ?></h2>
  12.                         <div class="entry">
  13.  
  14.                         </div>
  15.                 </div>
  16.                 <?php endwhile; endif; ?>
  17.         </div>
  18. <?php get_sidebar(); ?>
  19.  
  20. <?php get_footer(); ?>

Save it and your done with step one.

2. Create search results page

In your WordPress administration are, go to Write and select Write Page. Pick a fitting title (like ‘Search’) and choose google rearch results as template (that’s the name of the template we just created).


Save the page and go to Manage, select Pages, and click on View behind the Search page entry.


Copy the URL of the page, you will need it in the next step.


Done :)

3. Insert AdSense code into your page

At first, go to your Google AdSense setup and create a new AdSense for Search. When asked for Opening of search results page pick Open results within my own site. Here you have to enter the URL of the search you just copied.


The next page of the setup will show you 2 code snippets. The first one (search box code) you can insert anywhere in your blog. At the top, in the sidebar, wherever you like. Just play around with it and see what looks good and what doesn’t.


And finally the search results code. Now we do the trick. In your WordPress administration area go to Presentation and select Theme Editor. Open the ‘google search results’ file which shows you the template we created in step 1. Insert the search results code right here

  1. <div class="entry">
  2.  
  3. </div>

This will give you a template which looks like this

  1. <?php
  2. /*
  3. Template Name: google search results
  4. */
  5. ?>
  6.  
  7. <?php get_header(); ?>
  8.  
  9.     <div id="content" class="narrowcolumn">
  10.  
  11.         <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  12.         <div class="post" id="post-<?php the_ID(); ?>">
  13.         <h2><?php the_title(); ?></h2>
  14.             <div class="entry">
  15.  
  16.                 <!-- Google Search Result Snippet Begins -->
  17.                 <div id="googleSearchUnitIframe"></div>
  18.                
  19.                 <script type="text/javascript">
  20.                    var googleSearchIframeName = 'googleSearchUnitIframe';
  21.                    var googleSearchFrameWidth = 700;
  22.                    var googleSearchFrameborder = 0 ;
  23.                    var googleSearchDomain = 'www.google.com';
  24.                 </script>
  25.                 <script type="text/javascript"
  26.                          src="http://www.google.com/afsonline/show_afs_search.js">
  27.                 </script>
  28.                 <!-- Google Search Result Snippet Ends -->
  29.  
  30.             </div>
  31.         </div>
  32.         <?php endwhile; endif; ?>
  33.     </div>
  34. <?php get_sidebar(); ?>
  35.  
  36. <?php get_footer(); ?>

Update the file and your done! And what was the ‘trick’? You need to insert the search results code into the template and not into search
the page code, duh!


Many thanks to John Stansbury who pointed me to the solution: A primer on getting the Google AdSense for Search into WordPress