Replacing WordPress Default Search with Google Custom Search Engine

1251

In my last article about Creating Google Search Engine for your website, I had explained the benefits of using Google search engine in websites or blogs. Using the Google Search in 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 built a blog or a professional looking website in few minutes. Even though it is the most powerful web software powering more than 60 million website, 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 with 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 in other 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 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 Search Box

Copy the code for the Search box from Google Custom Search Engine page. Enter the search result URL in 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 in the text widget directly to render the search box.

Wordpress-Google-Custom-Search-6
Paste it in 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 in 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 do not have that file, create a file named searchform.php using the text editor like Notepad ++. Paste the code in that file and upload it to your theme directory using a 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 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 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 short code. This short code will be used in the page to show the search result, as WordPress do not allow us to insert JS directly inside the posts. Check the images shown for reference. The sample code to show both the search box and the search results is 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 short code to use it in 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 short code inside 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 in your inbox.
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.