How to Integrate Google Search into a WordPress Theme

December 19th, 2012 - Tutorials | 8 Comments

We all love WordPress for its content management capabilities. It let us create websites within minutes and populate them with content and tens of widgets and menus, but when it comes to search, there`s always been room for better. WordPress search function has been an issue since its beginnings. Search results are not as accurate as they should be, search criteria being set by date and not by relevance. Developers tried to come up with better solutions like plugins and custom functions, but there are also alternatives to the native WordPress Search.

The best way to proper search results on any website is to make use of the guru of search results, Google. Google released a product called “Google Custom Search Engine” which can be integrated into any website. Don`t worry, the search results are not taken from the entire web and put on your website, you`ll not have the google.com page displayed on the site. Search results are limited only to and from your website. Plus, you`ll be able to earn some money from Google Ads displayed in the results.

I want to show you how to unleash the power of Google Search by integrating a Google custom search engine into your WordPress website. The first thing you need to do is to set up a search engine for your website. Go to google.com/cse and follow the steps Google gives in the wizard:

Click on “Create a custom search engine” button.

search-engine-page

Type in a name and description for your search engine and select a language for it. Add your website URL so that Google can display search content from your website. Google offers a premium option for the engine which means ads-free search results. So if you don`t want to have ads displayed into your search results, you`ll have to pay a fee for it.

set-up-your-search-engine

In the next screen, you`ll be able to pick up a predefined style or customize one for your search results: search input, title text colors and font, search button, results and even ads style.

pick-a-style

customize-things

Click on Next button. In the third screen you can get the generated code for the search engine. As you already know, Google works with JavaScript to embed its products like Adsense or Analytics, so Google Custom Search Engine is not an exception.

get-the-standard-code

This is the standard JavaScript code which can be split in two: the code which has to be added before the closing </head> tag of your website and the second bunch of code which is added inside the body of the website and which will render the search form. But as I mentioned earlier, this is the standard code for a search box which will render results on the same page. This means that if you place the second code in a sidebar widget for example, the results will be displayed as well in the sidebar and this is not what we want. We`ll go a step forward and use our custom search form which will return google search results in a custom page. Next thing you need to do is to click on “look and feel” link under the textarea:

get-the-code

Next step, choose “Results Only” icon, then hit “Save & Get Code” button.

results-only

Next you can specify a query parameter name which will be embedded in the URL like “http://www.rockablethemes.com/search-results/?q=wordpress”.

custom-search

Get the code and place the first bunch into header.php, before the closing </head> tag:

<!-- Put the following javascript before the closing </head> tag. -->
<script>
  (function() {
    var cx = '000107852214872578004:xgt8vfupuak';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script>

Now we have to create the custom page template so that Google can properly return some search results. In your WordPress theme folder, create a new file, name it “template-search.php” and put the next code in it (I`ve been using page.php of TwentyTwelve WordPress theme as a base for the main body structure. You should use your page.php structure to create the custom file):

<?php
/*
Template Name: Search Results
 */
?>

<?php get_header(); ?>

	<div id="primary">
		<div id="content" role="main">

			<?php while ( have_posts() ) : the_post(); ?>

				<!-- This tag will render search results: -->
				<gcse:searchresults-only></gcse:searchresults-only>

			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now that you created the search page template, go to WordPress dashboard, create a new page and assign it the “Search Results” template. Notice that because I named my page “Search Results” the link automatically created by WordPress is “http://www.rockablethemes.com/search-results/”. We`ll need this detail in the next step.

assign-template

Let`s create the custom search form. If you don`t have a file called “searchform.php” in your WordPress theme folder, create one and add the next code:

<form method="get" action="http://www.rockablethemes.com/search-results/">
	<input type="text" id="q" name="q" value="<?php the_search_query(); ?>">
	<input type="submit" value="Search">
</form>

Note: I added to “action” the URL value of the custom page and to “name” the query parameter “q” set in google admin panel. These values are mandatory in order to make the search form working.

The last step is to add the search form on the website. Many WordPress themes are using widgets to show it, so go to WordPress->Widgets and drag and drop inside a widgetized area the “Search Widget”.

widgets

Now visit your website and search for some terms:

search-results

And this is how you can replace WordPress default functionality with a powerful search tool. Google puts at your fingertips within the custom search admin panel not only a page with results but also extended features like refinements, google analytics for search results and other statistics meant to help you learn about your audience and improve the user experience of your website. Although these alternatives work great, I`m still waiting for WordPress to take care of their search functions and bring them at the high level which made it the best CMS in the world!

Written by

Comments

  1. Thanks for the walkthrough, will be adding Google search to my blog very soon.. Cheers for the read.

  2. This Tutorial is very essential for me.
    Thanks.

  3. This is gr8, thank you.

  4. Great article!
    BTW, I made mine with adsense -> ads -> search :)

  5. I followed these steps, but it’s still not working. When I search for a term, it sends me to the wordpress search page, not the one I created for the google search. I don’t know what else to modify in order for it to work.

  6. “Next you can specify a query parameter name which will be embedded in the URL like ”

    That doesn’t exist anymore, how to follow this tutorial without that?

  7. Can we limit no of search results in page

  8. Thank you very much!! I was able to successfully integrate Google Custom Search into my website. Detailed article :)

    Thanks,
    Source Man

Leave a Comment