Nowadays we see Google search in almost every WordPress site or blogs. There are many advantage to use Google Search. The benefits of using Google search are speed, users already trust Google brand, you will not have to maintain or update it and if you have adsense account, you can advertise your product on Google search result page. The default WordPress search is not much useful, that’s why every WordPress site owner look for an alternative solutions. There are many plugins for WordPress Google search implementation, but we will show you without plugin solution.
How to add WordPress Google Search
The first thing we are going to need is to generate Google search box code from Google CSE. CSE stand for Custom Search Engine. You can generate you code by adding your site name to cse.google.com.
You probably already used Google account to register your site, if not, login and add your site. Once you login, click on add button and fill the necessary information.
Add WordPress Google search page
One added your site, now you click on Get code button to copy the code we need.
Depending on your site, it will generate a unique code for you. Here is what we have generated.
<script>
(function() {
var cx = '000132328623297516430:yfpvgjmz5b4';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search> By unique code, I means the code we generate is completely different from the code you generate. So make sure you are not copying our code.
Now, open your theme folder. It is located in the wp-content/theme/yourtheme. You see a searchform.php file there, open that file with notepad or any other text editor you have. Now past the code you have copied form Google CSE site. Save the file and close.
Now you can go to widget page of your WordPress site and add the search widget to side bar. Instead of default WordPress site search box, you will see the Google search. If you search anything in that field now, It will open a modal dialog and show the result.
Conclusion
If you want to customize and make the search field look different, you can customize it from Google CSE. Make sure you save the customize code and replace the searchform.php file with the new code generated. We have it has been informative for you. If you have any question or problem, feel free to share it bellow. 🙂