Make Google Adsense custom Search with WordPress Custom Page Template

If you have tried searching our site, then you should have noticed that we actually use Google Custom Search by Adsense. The advantage is not only it gives more accurate search result, but also it shows your adsense ads on the search page, which helps you earning revenue out of your blog.

Basically, Google Adsense for Search is a tool using which you can use Google’s Search feature to show search result on your website along with your Adsense ads. There are many ways of setting up Google Adsense for Search, but the best method [when you are using self-hosted WordPress] is showing results (and ads) on your own page, instead of redirecting visitors to Google.

Although there are many plugins available to do this, let us see how we can setup Adsense for Search on your WordPress blog, using WordPress Core Custom page template feature.

#0: Things you should know/have:

Not much here… You just need to know the basics of creating of custom page template. If you don’t know about this, then here is the perfect tutorial for you:

• The concept behind making an Interactive Custom WordPress page template
• A Google Adsense Account.

#1: Creating the Google Adsense Search:

• Login to your Adsense account and navigate to Adsense Setup » Adsense for Search. 
  This will take you to the Adsense Search setup wizard.
• Now on Search Type enter choose “Only sites I select” and enter your sitename. If you wish to show result from multiple sites, then you may enter one site per line.
• On Optional Keywords field, dropin some relevant keywords for your site, using which the ads would be shown.
• On the next page, choose your desired style for the search box. Here at iTg, we have designed our own! On the next tutorial, we shall discuss how to design Google Search box.
• The next step will ask you about how and where to show your search result. This is most important. Give it a hold here and lets do something from the WordPress site. But don’t close the page.

#2: Setting up the WordPress side with Custom Page Template:

#2.1: Creating the Custom Page Template:

What we need here is a full width custom page template for wordpress. As mentioned before creating a page template may vary for your theme. But you should be able to make a simple one if you have a little knowledge in xhtml and css. Here is an example of the Custom Page template we are going to use:

<?php
/*
Template Name: Adsense Result
*/
?>
<?php get_header(); ?>
	<div id="main">
	<div id="content" class="fullwidth">
		<?php have_posts(); the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
                                <!-- Our Adsense Search code here -->
				<?php the_content(); ?>
				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
			</div>
		</div> <!-- End div.post -->
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
	</div> <!-- End div#content -->
</div> <!-- End div#main -->
<?php get_footer(); ?>

Save the file with a name say adsense-result.php and upload it to your theme directory. Now we are almost done.

#2.2: Creating a new page with the custom Template:

• Go to your WordPress Dashboard » Pages » Add New.
• Now put in some title like Google Search Result.  You don’t need to write anything else here.
• Select the Adsense Result from the Template dropdown menu.
• Publish the Page and note down the permalink of the page. Say it is http://dev.itgdesignbox.com/google-search-result/

Now we are almost done with the WordPress setup as well. Lets get back into the Adsense Search Setup.

#3: Finalizing the Adsense for Search Setup:

• Go back to the page where you have started the Adsense for search setup wizard. Under Opening of search result page select Open results within my own site and enter the permalink of the page you have noted before. See the above screenshot for better understanding.
• Click on continue and on the next page accept their terms etc and name your search engine. This will help you tracking the performance of your new search engine. When done click Submit and get code.
• On the next page two codes will be given to you. Search box Code which you can put as a Text Widget to the sidebar of your blog or somewhere inside your theme… The other one Search Result code is the code which we need to put inside the adsense custom page template.

#4: Finalizing the WordPress Setup:

#4.1: Modifying the Adsense Result page template:

Say, your Search result code is:

<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="http://www.google.com/afsonline/show_afs_search.js"></script>

Now edit the adsense-result.php file [Using WordPress Dashboard » Appearance » Editor]  and replace the <!– Our Adsense code here –> with the above code. So finally it looks like this:

<?php
/*
Template Name: Adsense Result
*/
?>
<?php get_header(); ?>
	<div id="main">
	<div id="content" class="fullwidth">
		<?php have_posts(); the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
                            <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="http://www.google.com/afsonline/show_afs_search.js"></script>
				<?php the_content(); ?>
				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
			</div>
		</div> <!-- End div.post -->
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
	</div> <!-- End div#content -->
</div> <!-- End div#main -->
<?php get_footer(); ?>

Save it and you are done.

#4.2: Adding the Search Engine as widget:

• Go to Widgets and drag a Text widget on the sidebar.
• Put in the Search box code and save the code.

And you are done! Try searching yourself and you should see Google Search result with Adsense Ads on your own page…

So that was quick isn’t it? Here are some tips:

1. Do not directly link the Search Result page from anywhere of your blog.
2. Do use a Search Result color scheme similar to your site.
3. Do submit your Sitemap to Google Webmaster for better indexing and results

And that’s it! Hope it was useful for you… Do give us your feedback and if you face any trouble don’t forget to drop in.