So today I did a little tutorial on how to setup Google Search API for your blog/website. This could be used instead of the standard search facilities usually provided in WordPress Themes. It’s really easy to setup! You can customise the search to show results only from your blog/website and other searches such as images, video, news and others (see below for full list).

Live Demo
Download Source

How to do it

  1. Get your Google API Key
  2. Put your key in the code below
  3. Customise the search (add your own domain name!)
  4. Customise the styles to suit your website
  5. Enjoy!

The JavaScript

google.load("search", "1", {"language" : "en"});

// Call this function when the page has been loaded
function initialize() {
var searchControl = new;

// site restricted web search
var siteSearch = new;
//Search API Topics
// create a drawOptions object
var drawOptions = new;
// tell the searcher to draw itself in tabbed mode
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);


Type in a search below!


/* the width of the controls (keep same as gsc-results for flush look) */
#searchcontrol { width:600px; }
.gsc-control { width:600px; }
/* the width of the search results box; no height value = nice auto look  */
.gsc-results { width:600px; }
/* the width of the search input */
.gsc-input { width:20px; }
/* hide "powered by google" (optional) */
.gsc-branding { display:none; }
/* custom colors */
.gs-title a { color:orange; font-weight:bold; }
#searchcontrol a { color:orange; }

Developers Guide

Tags: ajax google api, custom google search api, google search api tutorial, jquery google search api, setup google search api
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Pingback: Custom Google Search API Setup Tutorial « Big Engine Media()

  • sasha

    why it show result 4 item in ever page?

    • Mubarak

      Hi Sasha,

      it display by default 4 pages. If you want to more pages please add the following code after setSiteRestriction() function.


      It’s working for me …For more detail please check it on

  • jquery4u

    Hi Sasha,

    I don’t think you can specify the number of results displayed. I think it may be based upon the height of the containing element. Sorry I couldn’t be of more help.

    Take a look at the Google APIs Console: I’ll do a post on this soon when i get some spare time.


  • Neeraj


    How can i get the whole component to work across 2 pages?
    Page 1 – will have the text box to enter search query. (Eg. index.html)
    Page 2-will show the search results. (Eg. searchResult.html)

    I have the logic to get the value from 1 page to another through GET method.


    • jquery4u

      @Neeraj – I’m assuming you mean 2 pages by using an iframe for the 2nd page? You could pass the iframe a query string by modifying the src attribute. Something like this (ps haven’t tested this!):

      var iframeSrc = $(‘#iframe’).attr(‘src’);
      var searchQuery = [capture your users query and store here]

      then reload the iframe:

      hope this helps

  • chahi


    i want to show Paid links and Related Searches with above Demo Code
    any idea you guys have ..??


  • Pingback: 10 Easy API Tutorials with jQuery | jQuery4u()

  • Waqas Ahmed

    I implemened google search in my website but i m getting following error.

    Google is undefined… (In google chrome)

    could not complete the operation due to error 80020101. (IE)

    Please help

  • Sam Ambrose

    Any chance you could write this up for Google’s CSE V2.
    V1 has served me well, but this is now deprecated.

  • GP

    I am implementing same code with Android webview for specific web site, After Search When I click any link it open page but I am not able to find out close X icon on that page to go back to my app……..Any Idea???

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.