Replace wordpress search with Google Adsense for Search

Well if you notice that my blog’s default search box has been replaced with Google Adsense for Search box. And if you search for anything, results are shown right in my blog and not on Google page. How to do this?

Well so I am writing a guide on how to achieve this. This guide will work for any wordpress template and across almost all wordpress versions.

Steps to add search page in your blog:

  1. Login to your Adsense account and go to ‘My Ads’ and then click on ‘Search’ and then select ‘Custom Search Engines’.
  2. Now click the +New Custom Search button at top. You will see the following screen. (I have expanded all the possible options – click the image to enlarge it) 
  3. Now fill in the options. Since you are creating it for your blog/site, select the option ‘Only sites I select’ against ‘What to search’ option. Select other options as suited for your site.
  4. Don’t forget to add a custom channel for your search box so that you can track its performance later on.
  5. Select proper style for your search box on the page. Also make sure Ad style matches and blends well with your site’s theme because the that style will be used on the ads displayed on the search page.
  6. Now under the Search results option select ‘on my website using an iframe’ checkbox where Display results: is shown. This will ensure that results are displayed on your site only and visitors don’t have to leave your site during the search operation.
  7. Now create a page on your wordpress blog/site named ‘Search’ with the slug ‘search’ and enter that page’s url in the box where it says ‘URL where search results will be displayed’. It is not compulsory to use the page slug/name as what I am using. You can use it whatever you want.
  8. Leave the width of the search results page as 800 as the search results are displayed best in that width. Since my blog’s design didn’t have that much width initially therefore I dropped the sidebar on my search page by using a custom template to display my search page. You can experiment with lower width for the search page and test whether it works for you or not.
  9. After filling through all the options, click the final button ‘Save and get code’. Now you will see 2 codes are generated : Search box code and Search results code. Save both of them somewhere in a text file. Now your job at Adsense site is completed.
  10. Now go back to the page you created on your site in step number 7 and select HTML tab in write page page (if you had created the site/page in WordPress) and enter the both the codes you got in the above step on this page. Yes we will also display the search box along with the search results. This is because if the user does not get the appropriate results he can use the search box to search again. On my site it also serves another purpose that since I have turned sidebar off on my search results page I need to show the search button again.
  11. Now insert the ‘Search box code’ again on the template wherever you want to show the search code or in a Text widget which you can insert into the appropriate place.
  12. So that’s it. Your site/blog is running a google search box and will show you results from Google and even show your ads on the results page. If you have any doubts, ask in comments.

Note: This was an old post dated back in 2007 which I have rehashed and updated to work with the latest Adsense Dashboard design and on popular requests.