Google custom search for your WordPress blog

Hi friends, In this post I am going to explain how install Google custom search for your WordPress blog and design search box as per your blog theme. I have implemented Google search in my blog and designed as blog theme.

Google custom search for your WordPress blog by Anil Kumar Panigrahi

Step 1:

Go to below link

https://www.google.co.in/cse/create/new

Step 2:

Give your domain name and clicks on ‘Create’ button

Google custom search for your WordPress blog by Anil Kumar Panigrahi

Step 3:

Left side we will have ‘Edit search engine’ and select your domain name

Step 4:

Clicks on ‘Search engine ID’ and get that key

Google custom search for your WordPress blog by Anil Kumar Panigrahi

Step 5:

Place below code in your header.php file

here action is your domain name and design form as per your theme design.

Step 6:

Place below code in your search.php file

<div id='cse' style='width: 100%;'>Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'en', style: google.loader.themes.DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var customSearchControl = new google.search.CustomSearchControl('REPLACE IT WITH Your search engine ID', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchResultsOnly();
customSearchControl.draw('cse', options);
function parseParamsFromUrl() {
var params = {};
var parts = window.location.search.substr(1).split('&');
for (var i = 0; i < parts.length; i++) {
var keyValuePair = parts[i].split('=');
var key = decodeURIComponent(keyValuePair[0]);
params[key] = keyValuePair[1] ?
decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
keyValuePair[1];
}
return params;
}
var urlParams = parseParamsFromUrl();
var queryParamName = 's';
if (urlParams[queryParamName]) {
customSearchControl.execute(urlParams[queryParamName]);
}
}, true);
</script>

replace ‘REPLACE IT WITH Your search engine ID’ with Your search engine ID and test it.