How to Display Google Search Results on Your Own Page in Wordpress

Google has just released a long-awaited feature for Adsense for Search. You can have Google search and sitesearch results displayed within your own website or blog pages for enhanced integration of Adsense with your own site.

Implementing this new feature in Wordpress can be somewhat tricky. You can't just copy-paste the Google code to your Page editor - you have to create a new page template for the code to function.

Here's the short version: Create a new Wordpress page template, call it e.g. "googlesearch", with your Google Adsense for Search results code in the body, then create a new, blank page and select "googlesearch" as the page template for it.

For those who don't know how to accomplish that, here's the long version: a very detailed step-by-step guide on how to display Google Adsense for Search results on your own page in a Wordpress blog. I'll show you exactly how to do it using the Bluehost cPanel, Wordpress and the Ads Minded theme. If you are using some other theme and hosting your blog with some other company, you can still follow these basic principles.

Login to your hosting account and open cPanel

Bluehost cPanel

Find the File Manager and open it. Navigate to the Wordpress Themes directory. In my case, the directory is at
/ public_html / wp-content / themes / adsminded /

file manager

In the cPanel X file manager view, click on Create a new file. Choose the text file option, name your file "googlesearch.php" and click Create

Create file in cPanel

That's it for the cPanel bit. Now, go to your Wordpress Dashboard, navigate to Presentation -> Theme Editor and look at the list of files on the right - select the Page Template for editing. Select all the code in the editor window and copy it to the clipboard. You don't have to update the file at this point. Instead, look at the file list on the right again - click on the file called googlesearch.php. You'll get a blank file in the editor window. Now, paste the code from your clipboard to the editor. You have now created a carbon copy of your Page Template file.

We need to make some changes to the file now. Remove everything between

<div id="blogs">
</div><!– end blogs –>

Next, copy and paste the following code to the very beginning of the file:

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


Update the file. Open another browser tab or window to setup your Adsense for search code.

Go to Google Adsense, select Products -> adsense for search. Select your preferred options as usual, just remember to check the Open results within my own site option. If you don't know how to add a Google Search feature on your website, check a previous post for detailed instructions.

Adsense Setup will prompt you for the URL of the search results page. Type in the following:
http://yourblog.com/search

…where "yourblog" is your blog address. Finish your Adsense Setup as usual, remember to create a new channel and select your preferred color scheme - I recommend the Seaside color scheme for the results.

Once you reach the code page, copy the Search Results Code to clipboard. Go back to your Wordpress Theme Editor and paste the code right after the

<div id="blogs">

line. Add two

<br />

both on top of the Search Results code. Next, go back to Google Adsense Setup, and copy the Sitesearch code to the clipboard. Again, go back to the Theme Editor and paste the Sitesearch code to the bottom of the Search Results code, right before the

</div><!– end blogs –>

line. Update the file.

You have now finished your Wordpress Page Template for Google Adsense for Search Results. Check your final code against mine and make sure it is identical except of course for the blog address and adsense account identification parameters. You can find my working code here.

Next, we have to create a new Wordpress Page for the search results. Go to the Wordpress Dashboard, navigate to Write –> Write Page. In the Page Title field, give your page the name "Search" and from the drop-down menu on the right, choose to use the page template "googlesearch":

Creating Wordpress Page for Adsense for Search Results

Otherwise, just leave the page completely blank and hit the Create new page button.

Not completely finished just yet. Once more, copy the Google SiteSearch code to the clipboard and replace the old SiteSearch code in all your theme files with the new one. If you are using my theme files as your template, you need to replace the SiteSearch code in Archives, Page Template, Single Post and Main Index Template.

Phew, that's it. Now you have a completely functional site-integrated Adsense for Search, congratulations!




Google
 
Web innerblogger.com



One Response to 'How to Display Google Search Results on Your Own Page in Wordpress'

  1. Add Google Search to Wordpress Blog » InnerBlogger - The Guide to Successful and Profitable Blogging - September 6th, 2006 at 11:16 pm

    […] Update Sep-06-2006: Please see Displaying Google Search Results on Your Own Page for a more complete Google SiteSearch Feature. […]


Leave a Reply