PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add Custom Google Search to Make Content Searchable to Your Readers

How to Add Custom Google Search to Make Content Searchable to Your Readers

For any quality and visitor-friendly website containing loads of blog posts, an exclusive search box is pretty essential, for it can help visitors find their wanted articles within the shortest time. To be honest, the utilization of search box is good for the SEO of your site as this can improve the reading experience greatly, which is one of the critical elements for the ranking algorithm of all the search engines nowadays.

In fact, there are a lot of tools and applications helping you integrate a search box with your site easily. Here, we highly recommend Custom Search Engine. This is a useful platform allowing you to generate a custom search box with ease. In addition, it is offered by Google, so its utilization can benefit your Google search ranking to some extent. In the following, we’d like to tell you how to add custom Google search to your website.

Create a New Search Engine

Firstly, you need to create a new search engine from this page, which is exclusively for your website. People can only search for the information within your site, but not from any other unwanted websites. Here, you can enter the domain name or website URL if the search box is for the whole site. Also, you can enter the page URL if this box is only for some individual pages or categories of the site. After entering the website or page address, you need to choose the language of your search box, and decide the name of the newly-created search engine. Then, click the Create button.

Create New Search Engine

Basic Search Engine Settings

Upon creation, now you need to edit the search engine to make it fully match your needs. For instance, you can add the keywords and descriptions for the search engine. Also, you can allow the image search and the speech input search. The former one allows readers to search for the images in your site, and the latter one is useful for those who cannot enter the words for search conveniently.

Basic Search Engine Settings

Configure the Appearance of the Box

The default Google search box is simple and plain, which may be unable to match the overall style of your website. In this case, you need to customize this box to make it as attractive and obvious as possible.

Firstly, you can decide the layout for both web search and image search. For web search, the searching result can be showcased in an overlay, in the full width, and in a compact form. There are seven options for you to choose. In terms of image search, you can choose among three perfect options.


Then, you can choose the box theme among seven existed choices. You can choose one based on the color scheme and style of your website. If you cannot find the most appropriate one, then you can choose the default theme and start customizing it on your own.

The general configurations include font, border color, and background color. In fact, apart from the customization of the search box, you can also customize the results, such as the color of result title, post URL, and the snippet. You simply can decide the appearance with loads of opportunities.


There is a preview section in the right hand. You simply can check out the final effect of your search box in the real time.

Lastly, if you want to the showcase the thumbnail image of the resulting posts, you can also turn this function on.

Get the Coding Stuff

If you feel satisfied with the appearance of search box, now you can save the changes and get the code. Simply click the Save & Get Code button. Then, this Google platform can generate the coding stuff automatically. You only need to copy and paste the code into your website.

Here, we have to mention that code needs to be placed into the body section of the HTML code of your webpage, and also within the “div” elements. After saving the settings, the search box can appear at your website automatically.

code placement