It is common to use Google Custom Search for WordPress Site because of its speed, search algorithm, trustability, security, no need of server resources and database load for indexing..etc. This post will explain how to add Google Custom Search in your WordPress or PHP site without any plugin.
Get CSE Code:
Login Google Custom Search and add a new search engine.
Left side, select your search engine and click on “Look and feel” option
Select “Result Only” layout and click “Save and Get Code“.Copy it, the code will be like below:
<script> (function() { var cx = 'partner-pub-xxxxxxxxxxxxxxxx:xxxxxx-xxxx'; 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:searchresults-only></gcse:searchresults-only>
Why Results Only:
I selected “Result Only” layout means not selected to use Custom Search Box because:
1. Google Custom Search box loads background image as watermark. We can remove it with CSS or javascript tweaks but it is against the terms of service.
2. If we use it then need to add javascript code which will be on all pages (because search box will be present in all pages). Google PageSpeed throws following error:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
http://www.google.com/cse/api/branding.css
It affects PageSpeed score and page load time for all pages.
Search Results:
On WordPress or PHP website, create a page (say https://techbrij.com/search-result) and paste the CSE code where you want to show search results.
Setup Search Box:
As we are using result only from Google CSE script, we will add our own textbox for searching. Put following code in header or sidebar where you want to display search box:
<div class="searchbox"> <form action="https://techbrij.com/search-result" id="cse-search-box" method="get"> <div> <?php if (isset($_GET['q'])) { ?> <input type="text" name="q" size="35" id="txtGoogleSearch" placeholder="Search Here" value='<?php echo $_GET['q'] ?>' /> <?php } else {?> <input type="text" name="q" size="35" id="txtGoogleSearch" placeholder="Search Here" /> <?php } ?> </div> </form> </div>
You can easily set look and feel and customize it as your choice. That’s it. Now search it and test it.
How It Works:
You can enter keyword to search and on enter, the url becomes
https://techbrij.com/search-result?q={search keyword}
Google CSE script fetches search keyword from querystring and displays search results.
Conclusion:
In this post, we added Google custom search to WordPress/PHP site considering Google PageSpeed and site performance.
Enjoy Google Custom Search !!
Is work 100% Thank You Sir!
Is there an updated version of this? It seems the same information is going around and no one is updating the outdate code/method. The new code Google CSE gives does not work in the searchform.php file and the method you have resulted in Google Chrome issues via mobile. I also contacted Google about the issue and they told me I was using a deprecated code, which is causing the issue (first code you have on this article) so I need to update it. Can you update this article? Or could you point me in the right direction?
Thanks for sharing such a depth guide with us. I loved the way you have written this article. Nicely organized content and amazing post graphics, Loved it! I’m sure this beginner’s guide will be helping a lot of newbie bloggers in coming days. Keep sharing such kind of quality blog posts… ??
Thank you! Works just great.
I tried the same way what you said but not working can u do for me