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
<input type="text" value="" name="s" id="s" placeholder="Type keyword and hit enter">
</form>
here action is your domain name and design form as per your theme design.
Step 6:
Place below code in your search.php file
<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.
Hey, thanks for sharing this, I will implement Google cse soon on my website.Your blog has always helped me develop websites better.