How to integrate Google search into WordPress site

One of my readers Nikos had emailed me last weekend, asking how did I integrate Google search of my blog into page (example). There are some valid reasons to do this, mainly to provide better and familiar experience to readers, so it is popular tweak.

Integration of Google Custom Search into WordPress isn’t hard but is little obscure so I decided if I am explaining anyway then it is worth a post.

Why bother

WordPress has native search implemented, but it has considerable shortcomings:

• quality of search results is often questionable;
• there is no control over it from admin interface;
• search is resource-intensive operation by itself, which might stress budget hosting and was reported as vulnerability to denial of service attacks.

Switching to Google search is by no means perfect, but does provide:

• familiar user experience;
• good quality of search results;
• monetization of search results;
• takes performance issues off your host.

What you need

1. Your site should be indexed by Google. There is an option of enforced indexing for search purposes, but it is limited. It is best to have properly indexed site anyway.
2. Google account to create and manage your search engine(s).
3. Understanding of WordPress theme structure and tools+skills needed to create and edit template files.

Set up Google Custom Search

Custom Search is one of Google services that gives you a way to have own version of Google, tailored to include (or exclude) what you need only and which can be customized and integrated.

Link http://www.google.com/cse/

Unfortunately it can differ quite a bit for different language versions so I will provide basic points to cover and you will have to figure out rest.

1. create a search engine:

• provide title, description and rest of organizational details;

• choose to only search included sites;

• provide scope to search, for my blog this is www.rarst.net/*

  depending on your site configuration you may need to exclude unwanted parts (such as tag and category pages, etc), I have those blocked from indexing so had no need to further specify;

2. customize looks and colors to fit your site;
3. unless you are going for Business option or have non-profit site, there will be advertisements included in search. You can link your search engine to AdSense account so you get your share from them.

Play with it until you are comfortable with settings and how it all looks. Custom Searches also get own page like this so you can test all you want before putting it on live site.

When you are done with setup it is time to choose integration mode (this tutorial is for iframe) and go for Get code. There are three parts to it:

• URL where results will go, in my case it is: www.rarst.net/search/

  set it up before you copy snippets to use;

• search box code;

• search results code;

Set up search box

First code snippet will simply display search form wherever you include it on site. There are numerous ways to integrate it, such as:

• hardcoding into theme’s template file (I have it added to sidebar.php my theme uses);
• including it in sidebar widget;
• including it in searchform.php template.

It is good idea to stick with one search box per page, otherwise it can produce non-valid code.

Set up search results page

This part is more tricky.

• create (or edit) theme’s search.php template file and upload to theme folder, it has to contain:
  1. theme header code;
  2. search box code (so users can change their query for another search);
  3. search results code;
  4. theme sidebar code (optional, I don’t have one on search page);
  5. theme footer code.
• create and save WordPress page (in admin area):
  1. call it Search or something fitting;
  2. if needed edit Permalink to match the one you had used on get code page;
  3. choose Search template (search.php you created earlier) for it in sidebar.

If you need further details on these steps study Creating a Search Page instructions in WordPress documentation.

If you had got everything right you should have working Google search at your blog.

Setup alternatives

There are some shortcuts to the process that will simplify your life but reduce what control you have over process:

• there are plugins that help with on-site setup, I tried few but ended up going more complex way of manual edits for slimmer code footprint;
• Google provides Custom Search Element that is basically minimalist version of Custom Search. It can use existing Custom Search settings or no settings at all and provides in-place search results with only single code snippet.

Extra options

Custom Search is actively developed product with many extras and advanced tweaks. This post barely scratches surface of what it can do.

If you want more then be prepared for extensive documentation. Something I will have to survive when refining search integration for new theme.

Overall

This probably took more time to write out than it took to integrate that search in blog. :) Anyway I hope it will be of use and I might revisit topic later when I get to some advanced tweaks I want to try in new theme.

PS Appnews has kick-ass Custom Search for software that combines results from Rarst.net, gHacks and Freeware Genius. Be sure to try it out!

Related Posts

• Stack Exchange Q&A sites network
• AnyWhereInDB – PHP app to search all MySQL tables
• Going beyond Google to multiple search engines
• Make Opera custom search site-aware with JavaScript
• Refine Google search with time frames