Adding Google Custom Search to your Website

It's imperative your users have a reliable and easy method for finding your content. What better way to achieve this than including search powered by Google? But simply adding the default code provided by Google leaves your site's search lacking. While the functionality is there, the professional styling expected on websites today is notably absent. The tutorial below solves this dilemma, merging the powerful functionality of Google Custom Search with a sleekdesign.

In Solodev, implementing Google Custom Search is as easy as registering your website with Google and adding a shortcode. For other websites, we've included a pure HTML tutorial which is CMS neutral and will work on websites of all varieties.

Below is all the code you need to implement custom search on your website.

Step 1

Copy and paste the HTML or Solodev Shortcode where you would like your search form to populate and register your website with Google.

• HTML
• Solodev Shortcode

Step 2

Download the JavaScript below and include it in your web page.

Step 3 - Includes

Include the following JavaScript in your HTML document.

Step 4 - Google Custom Search

Download the CSS below and include it in your web page

Step 5 - Includes

Add the following includes to the header of your HTML file (or Solodev Shortcode Repeater file).

An example of a search results page, which will appear via AJAX, is shown below.

With just a few lines of code you have provided site visitors the ability to search your entire site using the power of Google (and the help of Solodev) - Enjoy!