CMS Wordpress

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
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
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
Google custom search for your WordPress blog by Anil Kumar Panigrahi

Step 5:

Place below code in your header.php file

<form role="search" method="get" id="searchform" action="http://www.anillabs.com/">
    <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

<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.

1 thought on “Google custom search for your WordPress blog”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.