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.

Anil Kumar Panigrahi

With more than 10 years experience in PHP and Founder of Anil Labs, a blog for PHP and related posts. contributed posts regarding CodeIgniter, CakePHP and Learn PHP online ... Contact : [email protected]

You may also like...

1 Response

  1. Michael says:

    Hey, thanks for sharing this, I will implement Google cse soon on my website.Your blog has always helped me develop websites better.

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.