Integrate Google Custom Search with WordPress without using Plugins

If you are rethinking the default search system of your WordPress site, Google Custom Search is the best alternative to proceed with. It has several advantages over the traditional WordPress search. You can use some handy plugins to replace WordPress Search with Google Custom Search, and can do it yourself also. This article covers how to integrate Google Custom Search with WordPress without any plugins.

What is Google Custom Search or Google CSE? It’s a facility by Google which can be used to search within a website using Google Search mechanism. With Google CSE, you can build your very own Search Engine to use on your site with several useful features.

Why Google Custom Search instead of WordPress Default Search?

So, why should you use Google Custom Search in place of WordPress default Search? Here are some key points covering advantages of Google CSE:

  • WordPress native Search doesn’t returns the relevant and satisfactory results. Whereas Google Custom Search provides high-quality and relevant results.
  • Google also gives your a way to monetize the search results by displaying Google ads on search results pages by using AdSense for Search (you need to be an AdSense publisher to use AdSense for Search).
  • Google CSE also allows the customization of the Search appearance to merge it with your site. You can also use it’s predefined style or color palettes.
  • It also allows us to include one or more websites, or specific webpages to search using a single search box.
  • Also provides features like autocomplete, auto thumbnails etc. for searching.
  • You can also get the enhanced reporting of your searches with Google Analytics.
  • Google CSE is monitored externally by Google itself, hence it also saves you some bandwidth by avoiding PHP requests on your server unlike WordPress Search.

Integrating Google Custom Search with WordPress

Here we begin how to integrate Google Custom Search with your WordPress blog:

Setting up Google CSE

1. First off, go to Google CSE and sign in using your Google account. After that, click on the button saying Create a Custom Search Engine to start.

2. You will see a form to set up the custom search engine. Just supply the required information like Name of your Search Engine, it’s description, Language, Sites to Search (one site per line) and select the Standard Edition, accept Google Terms of Service and click “Next“.

setup google custom search with wordpress

3. Next, in the “Try it out” section, you can choose or customize the style, look and feel of your Search Engine. Just click on “Customize” button of any selected theme.

customize google custom search style and color

4. Customize the styles to match the resulting search engine with your site and click “Next” button.

customize google cse styles

5. In the final “Get the code” step, you’ll get the code of your custom search engine, but do not copy this code, as we have more things to set up. Just click on the Change Look and feel link below this code.

change layout google cse

6. Now, in the “Choose Layout” section, select “Two page“. The “Two page” option allows us to display the search box anywhere on our website but return search results on a specific page within the same window.

change layout google cse

Click “Save and Get Code“. The next page has two codes, code in first textbox (Code#1) is for Search Box and the code in second textbox (Code#2) is for Search Results. Leave this page opened.

google custom search code

Our Search Engine is almost ready, and now we need to prepare our WordPress for this integration.

Adding Google CSE to WordPress

Observe the below given code:

<php
/* Template Name: Search */
?>
<php get_header(); ?>
<div id="content" class="widecolumn">
Paste Google Custom Search Element Code here
</div>
<?php get_footer(); ?>

Copy-paste the code, replace the line “Paste Google CSE Code here” with the Search Results Code (Code#2), and save the file as search-cse.php. We’ll be using this Template in our Search Result page on WordPress. Upload this file to your active WordPress Theme Directory. You can do this using an FTP Client like FileZilla, WinSCP or locate the directory in the cPanel and upload it directly.

Now, create a page in your WordPress with a heading like “Search Results” as this page will display our Search results. Leave the page content blank. In the Page Attributes, choose “Search” from the drop-down in the “Template” section and publish the page. Grab this page’s URL. Now go back to Step 6 where we left Google CSE opened, put this URL in “Specify Search Results Details” section in the textbox asking “Specify the url in your site where you want the search results to appear“.

google cse wordpress integration

You can simply put the Search box code (Code#1) in the sidebar widget of your WordPress theme. You can also hard code it in your WordPress theme to show it anywhere, but it is not recommended unless you’re an advance WordPress user.

To put the Search box code in the sidebar widget, go to Appearance » Widgets in your WordPress Dashboard, drag-drop a text widget in your sidebar and paste in the Search Box Code (Code#1).

WordPress plugins also require the Google CSE codes and almost similar method to function, but still if you’re looking for a plugin, you can search one in WordPress plugin directories (sorry, I haven’t found any newly updated plugin).

So, you have successfully integrated Google Custom Search with your WordPress blog. Test it by searching for something on your site and tell if it is working smooth or not.

Also see Important tips to make WordPress Fast.