Hosting Tutorial & Guide

How to Add Google Custom Search

updated on Mar 20, 2015
How to Add Google Custom Search Google custom search engine is a great tool which can enhance the search function of websites and present visitors with better search results. Although some sites, like those built with WordPress, come with a built-in search box, many of them may have trouble displaying accurate results, which does harm to user experience and site traffic.

If you are in this kind of trouble, we will suggest you to use a third-party search engine like Google custom search engine. This post includes a step-by-step guide about how to embed Google custom search into a website, and explains how to customize the search box to fit the design of the site.

Create a New Google Custom Search Engine

First of all, you need to create a new custom search engine by visiting the homepage of Google Custom Search Engine and signing in with a Google account. Then, click on the "New search engine" button, which will get you a page like the screenshot below.

Create a New Google Custom Search Engine

In the "Sites to search" box, enter the URL of the site or page that you want to add a custom search engine to. The URL will be used as the name of this search engine by default, so that you can further manage the search engine in the dashboard in the future. Of course, you can choose to give a custom name to the search engine.

If you want to limit the number of pages to a certain search item, you can configure types in the "Advanced options". When you have done giving the required information and configuration, click on the "CREATE" button.

On the next page, you can see that the custom search engine is created, and now you are given 3 options – to add the search engine to your website, to view it on the web and to modify it in the dashboard. In case that you want to embed it to a website now, you just need to click on the "Get code" button.

Get Code

The next page will show you some lines of codes. Just copy all of them because you will need them in the following steps.

Google Custom Search Engine Code

Add Google Custom Search to Your Website

Since you have copied the search engine embedding code, you can get the whole procedure done by pasting the code where you want the Google search box to appear. To set an example, we will discuss how to add a search box to the footer section of a WordPress site (as WordPress is the most popular site-building application used by millions of webmasters).

Firstly, log into WordPress dashboard and go to Appearance > Widgets. Secondly, drag a Text widget to the Main Widget Area. At last, paste the code copied before into the body of the text widget and click "Save”. Previewing the front-end of your homepage, you can find that a Google search box exists in the footer.

Add a Text Widget

Adding a text widget is the easiest way for embedding a Google custom search box. If you have certain knowledge about modifying theme files, you can also accomplish the task by inserting the codes to relevant theme files.

Customize the Look and Feel

You may find that the default design of the search box is quite simple and lacks the aesthetic sense. But don't worry, Google has already thought about it. In the control panel, you can see an option of "Edit search engine" with which you are free to make your own customization.

Clicking on the option and selecting the new search engine you have just created, you are able to gain access to multiple customization options including basic settings, look and feel, search features and statistics. Assumed that you only need to customize the appearance, click on "Look and feel".

Customize the Look and Feel

In the look and feel option, you are allowed to customize the layout and the background. The "Customize" tab allows you to customize the font, background color, border color and search button as you like. When you make any change, you can have a preview immediately. As long as you have made all your decisions and want to show the new style on your site, click "Save", and the changes will apply on your site automatically.

New Appearance

If you have chosen to customize the search box before adding it to the site, you can click on "Save & Get Code" to obtain the code directly on the customization page and then paste the code to your site.


Google has developed a large number of powerful tools to make the life much easier for webmasters to get websites promoted and optimized. Besides the custom search, you can also make use of Google Adsense to make money and utilize Google Analytics to track traffic.