Google, How to, Misc, Wordpress

Integrate Adsense for search on your WordPress blog without messing up!

Most blogs use Adsense to monetize and most of them use WordPress as their blogging platform.Wordpress,as many would have known,comes with an in built solution for searching the blog.This search is suits well to the site’s design as it is integrated with the template.Also, many would like to use the features of Adsense to the fullest, and would love to integrate Adsense for search using Google Custom search engine.

But many make a mistake here.Almost all wordpress themes feature a Search box.But instead of replacing this with their CSE (Custom search engine),i have seen many bloggers use their CSE as a widget on the side bar or header area.If your theme has a default search,why don’t you take advantage of replacing it without losing your theme style yet make another way of monetizing?

Replacing the default search with Google CSE has two advantages.One as you know, you can use Adsense for search.The other is you can reduce your server’s CPU load.Yes.Every search query on your site costs more CPU usage than a normal page load.Using CSE, the results for the query are processed by google and returned to your page.This way you could lower your CPU usage and this will mean you a lot if your blog has a high traffic.If you are interested in replacing your default search with Adsense for search enabled CSE,then read further.

I have seen almost similar tutorial in other websites.But they just instruct you on creating a Custom Search engine and a page where the results would be displayed.They fail to instruct how to replace the default search with CSE without changing the look of the default one on the theme.But this one would.

Create a Custom Search Engine

To create an adsense enabled CSE,

  • Log in to your Adsense account.
  • Click My Ads
  • Click on Search from the list,listed on the left side.
  • Click on the New custom search engine button.
  • In the from shown,give any name you prefer for the CSE.
  • In the form field named What to search, select Only sites I select.
  • In the text box, type your site as *.yourwebsite.com replacing it with your site name.
  • Under the Search Box look and feel,Select the default one with the watermark (This would match with the theme’s search)
  • Choose Display Search results on my website using an iframe and enter a page where results would display like http://yourwebsite.com/search (You will create this page later)
  • Fill other optional fields if needed and hit, Save and get code button.

Your code would be provided in different parts as Search box code and Search results code.

Your search box code will look something like this…

<form action="http://yoursite.com/search" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="<<your pub ID>>" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="20" />
<input type="submit" name="sa" value="Search" />
</div>
</form>

<script type="text/javascript" src="http://www.google.co.in/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

 

Replacing Default search

The search form of your default search will be in your theme’s files.It would be in a file such as header.php or searchform.php or something like that.

The default search form will look something like this…

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<input type="text" name="s" id="s" value="Search this site..." onfocus="something" onblur="something" />
<input class="searchsubmit" type="submit" value="Go" />
</form>

Now compare both the form codes.Bot would have a text input and a button in common.These tags are what you must work upon.In order to keep the style of your original search form, you will have to copy the styling attributes from the default form input tags to the CSE form.Styling attributes are those such as id,onfocus,onblur,class and such.just copy those from the original form and paste into respective tags on the CSE form.Do tis for both the text input field and the submit button.

After integrating the original styling your CSE code will look like this…

<form action="http://yoursite.com/search" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="<<your pub ID>>" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="20" id="s" onfocus="something" onblur="something" />
<input type="submit" class="searchsubmit" name="sa" value="Search" />
</div>
</form>

<script type="text/javascript" src="http://www.google.co.in/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

Compare the codes above before and after editing to know what type of changes are made.After editing, Replace the whole default search form on your theme file from <form> to </form> with the edited CSE code with your theme style.Save the file.

Creating search results page

Don’t trouble yourselves for this by editing page.php files and such.Just create a WordPress page with the name you specified while creating the CSE.Here in this tutorial as we used the search page URL as http://yoursite.com/search , our page name would be search.Make sure your page’s permalink and the URL on CSE match.Or it wont work.Now in the page content editor, switch to the HTML mode. Just paste the second part of the code you generated on adsense.The one named search results code.Place the search form code here too(if you wish it to be shown) hit Publish button.

You are done integrating your Adsense enabled search on wordpress.Give it a test to see if it works.

Share your experience in comments.Hit the share buttons below…

About the Author

Tharun is a bit attracted towards computers and stuff.He loves to blog,share and know more about computers and technologies.He shares what he feels is something good on this site...Stay connected.
Tharun is on: Facebook , Google+ , Twitter

1 comments
Ahsan
Ahsan

Very useful tips to add custom search box. I am trying it now