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!
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.
Copy and paste the HTML or Solodev Shortcode where you would like your search form to populate and register your website with Google.
Step 3 - Includes
Step 4 - Google Custom Search
Download the CSS below and include it in your web pagegoogle-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.
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!