Replacing WordPress Default Search with Google Custom Search Engine

In my last article about Creating Google Search Engine for your website, I had explained the benefits of using Google search engine on websites or blogs. Using the Google Search on your website increase the page views as the results shown are more relevant and are of good quality. In this article, I will explain about integrating the Custom Search Engine to your WordPress blog without using any search plugin. WordPress is the very powerful web software that can be used to build a blog or a professional looking website in few minutes. Even though it is the most powerful web software powering more than 60 million websites, its search results are not that satisfactory. So replacing it with the Google search will increase the conversation rate of your website. Using this Google Search instead of WordPress default search may also increase your income by providing the option to use Google Adsense for search.

Creating the Google Custom Search Engine

Visit Google Custom Search engine page from this URL. Login using your Google account. Create a Search engine by entering the details in the required field. Go to look and feel tab that is available in the left sidebar under the newly created search engine. Select the two-page layout as it is more convenient for showing the results separately on another page. Save your search engine and get the code. For detailed instruction on creating a Search engine check my previous article on Creating Google Custom Search Engine. Get the code and keep it ready. Use the text editors like Notepad++ to save the code temporarily.

Replacing the WordPress default search with Google Custom Search Engine

Before Doing any modification to your WordPress files, take a backup. That may help you to restore the blog if something goes wrong. If you are not sure about what you are doing, hire a WordPress developer or use a plugin to do this.

Requirements

Since WordPress do not support using Javascripts directly in the posts, you need a plugin to insert the code snippets as short-codes. Use the plugin like Insert HTML Snippet to insert the code for the Search results to the page, where you want to show the search results. Install this plugin and make yourself familiar with this plugin to use it efficiently.

Integrating the Google Search Box

Copy the code for the Search box from Google Custom Search Engine page. Enter the search result URL on the code page. For details Check our tutorial on Creating Google Custom Search Engine. The URL entered here should be used for the result page. Or else, use the code given below to override the default search result URL. This integration needs a theme file to be modified. If you do not want to modify your theme file, you can paste this code into the text widget directly to render the search box.

Wordpress-Google-Custom-Search-6
Paste it into the text widget if you do not want to edit the theme

If you want to replace the default search form with Google Search follow these steps. Once implemented, search widget will show the Custom Search Engine box instead of default search box. Open your WordPress theme editor by clicking Appearance > Editor from the left sidebar. In the editor select the theme which you are using. The list of files in the theme will be shown in the right sidebar. Select the file searchform.php to edit. Replace the contents of the search form with the Custom Search Engine code to render the search button in place of WordPress default search.

Wordpress-Google-Custom-Search-4
Edit the searchform.php and paste the code

If your theme does not have that file, create a file named searchform.php using the text editor like Notepad ++. Paste the code into that file and upload it to your theme directory using an FTP client or directly from your hosting control panel.

You have now replaced the default search form with the Google Custom Search box. Now go-to widgets and drag the search widget to your sidebar where you want to show the Search box. Enter a name for your search box if needed and click save.

Wordpress-Google-Custom-Search-5
Drag the search box to the sidebar where you want to render the search box

Here is the sample code for the search box. Replace the search engine ID with your search engine ID and the http://domain.com/search/ with your search result URL.

Code to render the Google Search Box

<script>
  (function() {
    var cx = 'Your-search-engine-ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only resultsUrl="http://domain.com/search/"></gcse:searchbox-only>

Creating a Search Page to show the Google search results.

Open the Insert HTML snippet plugin by clicking XYZ Html from the left sidebar. Paste the search result code in that. Save it and get the shortcode. This shortcode will be used on the page to show the search result, as WordPress does not allow us to insert JS directly into the posts. Check the images shown for reference. The sample code to show both the search box and the search results are given below. Replace the search engine ID with your search engine ID and use it.

Code to show the Search Result along with the search box

<script>
  (function() {
    var cx = 'Your-search-engine-ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
Wordpress-Google-Custom-Search-1
Paste the Search Results code in the HTML snippets
Wordpress-Google-Custom-Search-2
Copy the shortcode to use it on the result page

Now create a page with the Title ‘Search’. Set the URL of that page to http://www.yoursite.com/search/. This URL should be used as the result URL when creating the Google – CSE or in the ‘Result URL’ of the search box code given above. Now paste the shortcode into the content box and publish the page.

Wordpress-Google-Custom-Search-3
Create a result page

Your Custom Search Engine is ready now. Open your blog. Search and check whether everything works fine. Check this image showing the newly integrated search box to a WordPress blog. You have now successfully integrated Google custom search to your WordPress blog.

Wordpress-Google-Custom-Search-7
Google Custom Search in Action

Other People are Reading

Hope you liked this tutorial. For any clarifications and suggestions use the comment box below. Subscribe to our newsletter for getting the future updates directly to your inbox.

Related Articles

Free Email Updates !
Join the visitors who are receiving our newsletter and receive the Daily Mass Readings, Prayers and other updates directly in your inbox.
We respect your privacy and take protecting it seriously.

Leave a Reply

2 Comments On "Replacing WordPress Default Search with Google Custom Search Engine"

avatar
Newest Oldest Most voted
Saurabh Saneja
Guest
Saurabh Saneja

Hi,

Is there a way to use default WordPress form(I don’t want to use Google custom search form) but have search results page show google custom search results?

Thanks,

Saurabh