It is about technology!
 Subscribe to Feed

My experiments with Google Custom Search in a WordPress site

Google custom search“WordPress search sucks” – this you have heard a zillion times. And there are umpteen tutorials on the web about the procedure to set up Google custom search for your WordPress-powered blog/site. Most of them are well-written but some are obsolete since Google has been modifying and updating the custom search engine progressively. Things like iframe etc., are passé. The latest and by far the best tutorial is by DevPress written by Patrick Daly. But I have differed slightly from the procedure enumerated in the tutorial and tried out a few modifications myself which I wish to discuss in this article.

On Google Custom Search

As a preamble let me state that Google Custom Search Engine can be used not only to search one of your sites, but you can add any number of sites you own (or otherwise) and have the results appear on your site. You can even get the custom search the whole web too. The service is offered free by Google by serving ads. The ad-free offering is for $100 per annum. But the “Google Site Search” is altogether a different service meant for businesses looking to create a highly customized and Google hosted site search solution for a structured fee plan. The difference between these two are enumerated on this web page.

The search parameter question


Google custom search set up asks you to specify the query parameter name to be embedded in the search url and the letter “q” appears on the text box by default. You can either have “q” or have any other alphabet, or select “s” specifically since WordPress uses that operator for searching the database when the native search is used. I followed this method and found that a separate search box using the Google code is not necessary when “s” parameter is used. So no change in the theme’s searchform.php is necessary. But in this case I had to modify the search.php template file of the theme by including the code generated after selecting the “result only” layout on the “Look and Feel” panel. I pasted the Google code so generated on the location where the “loop” resided in search.php. The job was done.

But on second thoughts, I felt it was not a desirable step especially in a site with loads of posts and pages. It is because when you use the “s” search query parameter, the WordPress script drills through the entire database and fetches the results (but fails while displaying the results since the code the search.php has been changed. But the search action is done anyway..). This is a server-intensive process using up your site’s resources. This effectively reduces the advantage of using Google’s custom search engine.

Instead if you use any other query parameter, like “q” for instance, you get the Google engine search through the indexed pages and fetch the results. This will be more advantages since the whole process of searching your site is effectively “outsourced” to the Google cloud!

But for this, you will have to follow the following steps:

  • Select the “Two page layout” on the “Look and Feel” panel of Google custom search set up.
  • Decide on the name of a separate search result page where the results are to be displayed. Let us call it “Search Results” with the url yoursite.com/search-results – this may vary depending upon the permalink structure of your WordPress setup.
  • Type this URL correctly on the text box under “Specify the url in your site where you want the search results to appear:” in the Google “get code” page.
  • Copy the code snippet of the search box part and paste it in the searchform.php of the WP theme.
  • Create a “page template” in your theme, name it s “search-result.php or some such and paste the search result part of the Google’s code on this template replacing the “loop”. Upload it to the theme directory.
  • Create a new WordPress “Page” and name it exactly as decided by you earlier and use the “search result” template instead of the default.

And that is that!

Changing the number of search results per page of results

Google renders the search results by paginating them by 10. If you feel this is too small, you can increase (or, decrease!) by replacing the snippet “google.search.Search.FILTERED_CSE_RESULTSET” in the results code with the number you desire. I understand the maximum number allowed is 20, but I haven’t tried to exceed it to aver it to be true.

Tweaking the stlyesheet

  • Formatting of the search results is done by the css file: http://www.google.com/cse/style/look/default.css. You may modify it to suit your site’s design.
  • You may modify the initial “loading” text to something else or even use an image to tell your visitors that the results are loading, even though the time lag would be a fraction of second or a couple of seconds utmost.
  • If you want to change the default “no result” string to a line of your choice, try this:
    Find a line like this in the search results code:
    “customSearchControl.draw(‘cse’, options);”
    Below that line add this:
    “customSearchControl.setNoResultsString(‘…’);”. Add your no results message in between quotes.
  • The no result part is styled by the css classes “gs-no-results-result” and “gs-snippet”. You may re-style it to your liking.

I will try to tinker with the code further and share with you my experience by and by.

Tags: , , , , , ,

2 Responses to “My experiments with Google Custom Search in a WordPress site”

Leave a Reply

Copyright © HyperCircle 2009 | Powered by Wordpress | Designed by Elegant Themes