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 Custom Search Engine
Integrating the Google 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.
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.
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.
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
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 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
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.
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.
Other People are Reading
- Good looking custom heading styles for your WordPress blog using CSS
- Backing up a WordPress blog remotely in Google Drive
- Using Google drive as a host for JS and CSS files
- Downloading YouTube Videos without any softwares