Replace WordPress search with Google CSE

Did you ever feel like the WordPress search widget just doesn’t display data the way you wanted to? Google provides the answer to this predicament with Google Custom Search Engine / Google CSE.

Step 1: Google CSE

Start by registering on https://www.google.com/cse/
Click Add and type in your websites URL and the short-name of the search engine
Click on the short-name you just created and then Search Engine ID
You can add some styling to your CSE, but I recommend doing that last.

Step 2: WordPress

We need to edit some code, this can be done using Appearance->Editor, or by just downloading the necessary files.
We will be using a theme called Hueman for this guide.

Locate the location of your theme wordpress_root/wp-content/themes/your-current-theme

theme location

Find search.php in the folder and edit it
Delete the the unnecessary code so the file looks like this

<?php get_header(); ?>

<section class="content">

	<?php get_template_part('inc/page-title'); ?>

	<div class="pad group">
	
	<script>
	  (function() {

	    var cx = 'INSERT SEARCH ENGINE ID HERE';
	    var gcse = document.createElement('script');
	    gcse.type = 'text/javascript';
	    gcse.async = true;
	    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
	        '//www.google.com/cse/cse.js?cx=' + cx;
	    var s = document.getElementsByTagName('script')[0];
	    s.parentNode.insertBefore(gcse, s);
	 	})();

	</script>
	<gcse:searchresults-only queryParameterName="s"></gcse:searchresults-only>

	</div><!--/.pad-->

</section><!--/.content-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_template_part('inc/page-title'); ?>

(function() {

var cx = 'INSERT SEARCH ENGINE ID HERE';

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

'//www.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

</script>

<gcse:searchresults-only queryParameterName="s"></gcse:searchresults-only>

</div>

</section>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Insert your Search Engine ID in

search.php with Google CSE
PHP

var cx = 'INSERT SEARCH ENGINE ID HERE';

1

var cx = 'INSERT SEARCH ENGINE ID HERE';
Upload or save the changes to search.php

Step 3: Testing it out

Try searching for something located on your website and the result should look something similar to this.

WordPress CSE Search results

Whats the catch?

Google “hides” some of the information related to Google CSE, so I am going to highlight some here.

You are limited to 100 search queries per day on the free version.

That doesn’t mean that you can only search 100 times a day in total but means that all users can search 100 different keywords a day. If your site is heavy on traffic you can sign up for billing.

Example: I have 120 articles about different animals, a user searches for 100 of those animals by species, the 101. search query for a different animal will return an error. Different users can easily search for a same word like duck an unlimited amount.

For CSE users, the API provides 100 search queries per day for free. If you need more, you may sign up for billing in the Cloud Console. Additional requests cost $5 per 1000 queries, up to 10k queries per day.

documentation : https://developers.google.com/custom-search/json-api/v1/overview

Don’t mix up Google CSE and Google Site Search

They are two different services with different API and of course a different price model.
Read more about this on Alex Jordans Blog: Upgrading Your Custom Search Engine: BE CAREFUL

You can style your result page

There is a limit what you can style in Look and Feel.
Example:

<style>
/* GOOGLE WATERMARK REMOVAL*/
.cse input.gsc-input,input.gsc-input{
    background-image:none !important
}
</style>

<style>

/* GOOGLE WATERMARK REMOVAL*/

.cse input.gsc-input,input.gsc-input{

background-image:none !important

}

</style>

You can add this code somewhere in search.php, as you can see we removed the watermark on the right-lower corner of the search result.
We can remove the borders or style it in different ways, I leave that to your imagination.

You can see the popular search queries

In Statistics and Logs (Google CSE), you can see the most popular search queries. You can also easily link it to your Google Analytics then check under Reporting->Acquisition->Search Engine Optimization->Queries for a more detailed statistic.

You can monetize the free version with Google AdSense

The only requirement is that you use the same Google account with Google CSE and Google AdSense. It may take a while to get validated, but if you have some regular visitors on your site, it might be a way to get some money in.

___________________________________________

If you found the article helpful please share.
If you find any errors or misleading information in my articles please write a comment or email me.