How to integrate Google search into WordPress site

Google Custom Search icon 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

14 Comments

  • Thanks for these details buddy. I think I will also use these to integrate Google search better in my website (primarily, show my banner, instead of Google’s).

  • Thank you Rarst! Exactly what it was needed!

  • @Ishan

    External results page works almost as well probably… But integrated is more cool and techie. :)

    @Nikos

    You are welcome. :)

  • Today I finally decided to take the plunge, and show the results within my website. Came to this post, and followed steps closely. Got stuck on “Set up search results page” step ( I am terrible in PHP). Then, found following link that explains this step extremely easily:

    http://www.lancelhoff.com/search-results-within-wordpress/

    .. and voila, I am all set. It looks beautiful :)

  • @Ishan

    Shows nicely at your blog, but I think you lost footer. :) At least it is missing for me in search results page.

  • You are right – the search results do not have footer. I tried using post_footer() function (or something like that), but it started showing sidebar as well. I did not get a chance to research that which function should I use to just show footer and not sidebar. Anything that you know at top of your head ?

  • @Ishan

    I think it should be get_footer(); Drop me email if you want me to look into it properly. :)

  • Yea, that was the function I was trying but it starts showing sidebar as well. I have contacted my theme designer to see what’s wrong. Thanks for offering to help :)

  • Hi,

    After install … I tested it from a normal front page (non WP)
    And the search found some FLASH in a plugin (VIPERS) and some stuff in my themes…

    So I excluded the paths
    /wp-Admin/*
    /wp-content/plugins/*
    /wp-content/themes/*
    /wp-content/uploads/*
    and
    /wp-content/secret-stuff/*
    /wp-content/sell-stuff-mp3/*

    I also added exclude
    /blog/config*
    and /config*

    Is this correct – Alone the line and is there more dir that I need to exclude?

    Peter

  • @Self Discovery

    Yep, Google indexes a lot of not so obvious stuff if it can.

    Did you add these exclusions in CSE settings? It might be better to create robots.txt and block sensitive parts from search engines completely.

  • Hi Rarst,

    I added the WordPress dirs directly into the CSE Google Custom Search Engine(Exclude section)

    And also blocked other robots with the robots.txt file! Thx for reminding me!!

    Check out the new design and podcasts at http://www.selfdiscovery.dk (in English) by Annemarie Doolin

  • @Peter

    Seems to work nicely! You might also play with color/theme settings in CSE (there had been some improvements to those since this post) so that it fits with rest of site better.

    Also I am planning to implement some advanced custom view features in CSE for this blog (new theme live at last) so stay tuned for possible posts on that. :)

  • Thanks, i am searching for such a search in wordpress

Comments are closed.