How to add Google custom search engine in website

Custom search feature for users in any blog or article website is very important as it makes it easy for your readers to look more into your content and find posts to match their requirements. You can add search feature all by your self or can benefit with Google Custom search. In today's post we will show you how to add this feature in your website step by step.

First considering that you have account with Google open the following link else you can first create your Google account.

https://www.google.com/cse/

This URL will open following window


Click on the button 'Create a custom search engine' which will take you to the next window to fill the the required information


Enter your site URL in the top input box, the best practice is to use '*.example.com/*' to avoid any future error if you want your whole website to be searched else you can check for any other option which suit your requirements, then choose language and enter the name for your search engine which would be your site title and click on the button create which will take you to next window

The code for search bar is ready to be used you can simply click on Get code tab get your code and embed it in your HTML.


Simply copy the code and paste it in your HTML code where you want to show the search bar to show. You can change themes, look and feel and some other options, to perform these options go to Edit search engine tab at the left side of your above window, which will open the edit window


Here you will find the options to add description, some keywords, option to add image tab, you can add sitemaps, change themes, font colors etc.

There are few things which are preferable when using Google custom search to avoid errors and have good view.

First try to select two page theme where search box will appear on one place like inside header, right section etc, and on search the results will show on separate page. You will provide the result page URL like search.php and add the code inside that page which Google will give you.

Second important thing is that there should be only one JavaScript code inside one page like if you have chosen two page theme you will get two code from Google. The JavaScript code is same in both code so put it in the header and do not repeat now paste the line

<gcse:searchbox-only></gcse:searchbox-only>

Where you want to show search box and paste the line

<gcse:searchresults-only></gcse:searchresults-only>

where you want your results to be shown.