How to use google custom search for wordpress site

WordPress comes with a default search which searches posts and pages from your site. It works pretty decent. Here is why you should consider switching to Google custom search:

1. In case you serve multiple urls from same page, wordpress will still treat it as one page. So it won’t search them separately. This may be the case if you are serving multiple urls using query parameters from same page.
2. WordPress search is based on mysql which may become slow.
3. In case you have multiple wordpress in multiple subdomains or sub directories, Google custom search can search all of them.

Steps needed on Google Adsense site and wordpress admin UI

1. First go to Google Adsense account page and navigate to My Ads -> custom search engines. In case custom search engine is not visible, you may have to go to other products and enable adsense for search. Then click on “new custom search engine”.
   
2. Fill the custom search engine name (any name you can relate to this engine later is fine), and choose “only sites I select” and enter http://yoursite.com/. Replace yoursite.com with whatever is your site url.
   
3. Take default options for Custom Channels, Search box style, and Ad style. You can change them later if you want to.
4. Click on search results options and choose “on my web site using iframe”. In “url where search results will be displayed” enter http://yoursite.com/search/. You will also need to create a page in wordpress with permalink http://yoursite.com/search/.
   Please note that creating a page in wordpress is needed for search results to get displayed. You can choose some other name instead of http://yoursite.com/search/. Click on save and get code.
5. You will see search box and search result code now.
   Copy search result code and paste it to http://yoursite.com/search/ page you created. Since it is html code, you will have to switch to Text mode on wordpress admin edit screen. Here is how it should look:

   <div id="cse-search-results"></div>
   <script type="text/javascript">// <![CDATA[
   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>

6. Keep a note of search box code. We’ll need it later in wordpress custom plugin.

Steps needed in wordpress custom plugin

1. Write a simple plugin for your site containing functions.php file.
2. Add filter for get_search_form

   add_filter( 'get_search_form', 'google_custom_search_form_filter' );

3. Implement the function to replace search form with the google custom search code. It should look like this:

   function google_custom_search_form_filter () {
   $src =<<<EOM
   <form action="http://yousite.com/search/" id="cse-search-box">
   <div>
   <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx" />
   <input type="hidden" name="cof" value="FORID:10" />
   <input type="hidden" name="ie" value="UTF-8" />
   <input type="text" name="q" size="20" />
   </div>
   </form>
   <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
   EOM;
   return $src;
   }

4. Once your custom plugin is active, you should see the Google custom search box on your site.
   
5. Now type a query and search. The site url in browser should change to something like this:

   http://yoursite.com/search/?cx=partner-pub-......

   Now you should be able to see results using Google custom search.