Replace WordPress Search with Google Custom Search

8 Shares
Replace WordPress Search with Google Custom Search
8 Flares Twitter 2 Facebook 0 StumbleUpon 0 Google+ 1 LinkedIn 1 Buffer 3 Reddit 0 Pin It Share 1 Email -- 8 Flares ×

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). Geekish has done a fantastic job in detailing the steps to embed Google Custom Search into your WordPress blog.

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 schema.org. I utilize the Yoast WordPress SEO plugin to take care of that – and my site is updated with featured images for each post.

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:

<?php
/* 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 ] </div></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

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).

Related