Replacing Search in WordPress with Google’s Custom Search Engine

If you have a ring of web properties that are powered by WordPress, why not link them all together to drive traffic through a custom Google search?

If you have a ring of web properties that are powered by WordPress, why not link them all together to drive traffic through a custom Google search?

WordPress’s search engine is notoriously unhelpful because it sorts search results by date instead of relevancy. Few plugins out there solve the problem adequately, and those that do must replace the WordPress search engine altogether. (Some time ago, we had a free plugin called The Search Reloaded that sorted results by relevancy, but now it’s part of a commercial package. Search Unleashed and Relevanssi are two other solutions, but they have a tendency—in my experience—to interfere with heavily customized themes that employ complex loops.)

Part of overhauling the websites owned by Harvard Common Press (HCP) was the process of converting them to WordPress. You’ll notice that The Harvard Common Press website and its microsite, Not Your Mother’s Cookbooks (NYMC), search across indexed pages in the following domains:

  • http://www.harvardcommonpress.com
  • http://www.thejoyofpregnancy.com
  • http://www.notyourmotherscookbook.com
  • http://www.nursingmotherscompanion.com

So if you search for the book “The Joy of Pregnancy” you will get results from all of these sites, and Google will even suggest the other domains before calling results from within the HCP website. Potentially, we could even add Tori Kropp’s personal website to these results (she is the author of the book), even though we don’t control that domain.

(I’m still working on converting The Joy of Pregnancy and The Nursing Mother’s Companion to WordPress, so those don’t use Google Custom Search just yet.)

If your sites are already well-indexed by Google, the custom search offers a vast improvement over WordPress’ built-in search (at least for the time being). Users are already accustomed to using Google’s services, so the custom search will be a welcomed addition to your site, and it’s free if you don’t mind the ads. So let’s look at integrating the search into our theme.

Installing Google CSE in WordPress

Go to Google Custom Search and sign up for an account.

What you’ll need to do is create a custom search engine on your CSE site profile for each website in your ring. So I created CSE for both the HCP website and NYMC. I then had each of these engines search across all four websites listed above in the CSE Control Panel by entering in their domains. For our purposes, we want to embed the CSE as an iframe on our site, so choose that option when you get the CSE code.

You can customize the “Look and Feel” for each engine to your liking, as well as the search results’ box width (but keep in mind that if you position ads to the right, the search results box will force a width greater than 780 pixels even if you set the width to something smaller. The best position for ads if you want to control the width is “top and bottom”).

Next, I created a template called “searchform.php” in my theme to override the default search bar. The default code for this template is as follows:

Google will provide you with the following code for the search box:

To merge the two, you need to:

  • Remove the method=’get’ attribute
  • Ensure the cse-search-box id is on the form tag
  • Swap out the URL for the action attribute to where you’d like the search results to appear on your site (see below)
  • Add the hidden input fields
  • Add the javascript
  • Change/add the name attributes on the submit and text inputs to match Google’s

Here is an example:

Great. If you did this properly, you should see Google’s logo overlay on your search box. You cab modify how you want this to look in your CSE account.

Now for the search results template and Google’ second chunk of code. In your search.php template, we need to remove the loop, the pagination, and the if/else conditionals that handle the search results in WordPress, then put in Google’s second chunk of code. If you are using the Default theme, for example, your code would resemble the following:

Finally, you need to create a top-level page in the Dashboard called “Search” with the slug “http://www.yourwebsite.com/search/” and assign the Search template to this page via its Page Attributes.

Once this is complete, when you search using your souped-up Google Custom Search box, you’ll land on the new search template, and Google will load the results (almost instantaneously) in a paginated iframe!

Also in WordPress

Post a Comment

Your Two Cents


Your Comments

5 Replies & Counting

  1. realistdreamer 9 years, 2 months ago

    Good work. I’ve been spending a great deal of time pouring over code.google.com and also looking at their various APIs. There are good plugins for Maps, Translation, AdSense, Analytics. There’s room for some good stuff with Feeds, Opensocial, Custom Search, Calendar, Picasa and others. My JS skills suck, so I just take what they have in the Code Playground. It would be nice to see some full plugin development that adds administrative options for some of the functionality.

    NEway, thanks for the tut. I’ll be using something similar to search sites in my niche and even reviews’ pages on sites within my niche.

  2. Daniel Quinn 9 years, 2 months ago

    Yeah, it’s an OK holdover until WP improves search.

    WP integrates nicely with a lot of Google tools – I pull images from my Picasa account on this site through a plugin, for example. And it’s really easy to use custom fields of geocoordinates to generate Google maps on the fly.

  3. Catie 8 years, 2 months ago

    Thanks, have been meaning to implement something like that at our website, and I think you’ve broken it down simply enough that I can finally do it!

    Awesome web site! What commenting plugin are you using?

    • Daniel Quin 7 years, 8 months ago

      I’m not using a plugin – it’s WP 3.0

  4. Bilqees Kenchi 2 years, 7 months ago

    Hello, please anyone can tell about google adsense search? How to use it and its benefits, can I change its site mean to say height and width as per my requirement or site design. I have placed its code successfully but google ads are not show in search results.