Adding Google Custom Search to your Website


Implementing Google Custom Search is as easy as registering your website with Google and letting our code do the rest. This article provides the code and styles you need to implement custom search on your website. Enjoy!

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.


Step 2

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

google-custom-search.js

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

  google-custom-search.css

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.

Search Page Example

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!

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

We use cookies to provide and improve our services. By using our site, you consent to cookies.

Close Button

Try Solodev for Free!

By clicking "Submit" you agree to Solodev’s Terms of Service.