Replace WordPress Search with Google Custom Search

google custom search results

Let’s face it, WordPress Search is slow and very innaccurate. Thankfully, Google is both blazing fast and accurate. In addition, Google’s Google Custom Search has evolved to be embedded into your own blog (or web site).

Permalinks and Google Custom Search

For a site with permalinks like mine, I did have to make one additional modification, though. I had to make the action in the form tag relative rather than supplying the entire URL with domain.

<form action="/query/"...

Google Custom Search has another nice feature… it will pull the featured image if your site is utilizing them and you have optimized headers using microdata in accordance with I utilize the Yoast WordPress SEO plugin to take care of that – and my site is updated with featured images for each post.

google custom search results

Make a Search Result Page Template

Rather than hacking up your theme or messing with embedded Javascript in your page content, I’d also recommend building a template for the Google Custom Search Results Page. To do this, simply build a page that’s structured like your Single Page theme page. Gut all the chunks you don’t need and insert the Google code. Add a page to your template and call it something like googlecse.php with the following code within it:

/* Template Name: Google Custom Search Results */ 
get_header(); ?>
<div id="content">
<div class="post">
<h3>Search Results:</h3>
[ Insert your Google Custom Search Results Code Here ]
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now, when you add a new page for your results, select this as the template:
page template choose

I wouldn’t hesitate at doing this to any blog – not just for the blazing improvement in speed but also for the relevant results. You may even make a couple bucks on the side as well! Take a look for yourself and give my new Search form for a spin! You won’t be disappointed!

One note: If you’re running a theme like the Twenty Eleven theme, you’ll need to update the search field css with !important on each of the query field styles so that you maintain the look and feel! You will also need to hard-code the iframe CSS width in your style sheet (optionally setting the width within the JavaScript appears to have no impact).

One comment

  1. 1

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.