How to Add Google Custom Search to a WordPress Site?

How to Add Google Custom Search to a WordPress Site?

It is an increasingly common situation that users want to search for some contents on WordPress-powered sites and expect to receive quality results. However, the problem is that the default search widget that you can use is usually not smart enough to meet users’ expectations.

Fortunately, the world’s most popular search engine-Google offers a solution to improve the user experience of your website. It allows you to use its exclusive tools to create a customized search engine and integrate it into the WordPress site, which, however, is a little bit complicated with manual operations.

Therefore, in the sections below, our editors will utilize a carefully selected plugin to help you add Google custom search to your WordPress site in a simple and quick way. Scroll down to check for step-by-step guidance.

Step 1: Create a Google Custom Search Engine

In the very beginning, you need to create a Google custom search engine that you need to integrate into your site. Simply head over to this page and sign in using a Google account. Then click the “New Search Engine” option and fill related information.

Create a Google Custom Search Engine

As the image above displays, you need to enter the full URL of your site in the box under “Site to search” and it will be used as the name of your search engine. Remember to click the “Create” button to save changes.

After that, you will receive a notification informing you that the custom search engine is successfully created. Also, you have access to multiple options that include adding the search engine to your site, viewing it on the web, and modifying it with the control panel. All you need to do here is click the “Get code” button.

Click the Get Code Button

In the subsequent page, you will see the following text box full of code. Copy the unique ID of the search engine, which is highlighted as below.

Copy the Search Engine ID

Step 2: Initialize the WP Google Search Plugin

After having your custom search engine in place, the next thing you need to do is initialize the WP Google Search plugin. Go to “Add New” > “Plugins” on the dashboard, search for the plugin, and install it. If you have any problems during the installation process, refer to our in-depth guide on how to install WordPress plugins.

Initialize the WP Google Search Plugin

Step 3: Configure the Settings of the Plugin

After activating the plugin, go to “WP Google Search” > “Settings” on the sidebar of your admin area. On the plugin setting page, you have access to multiple options presented as below. Get started by pasting the Google search engine ID to the corresponding box.

Configure the Settings of the Plugin

As for the configuration of other options, check the following list for more detailed information.

  • We do not suggest you check the “Display search box before search results” option for usability sake.
  • Enable the “Support Overlay Display” option if you have set the search engine to the “Overlay” mode that we will detail in the last step. If not, simply leave this checkbox clear.
  • If you want some CSS to improve the appearance of the search engine elements, hit the checkbox next to the “Use default correction CSS” option. If not, skip this configuration.

Step 4: Add the Google Custom Search to Your WordPress Site

In the next, you need to add the Google custom search engine to your site by creating a search box. Navigate to “Widgets” > “Appearance” and add the “WP Google Search” widget to the sidebar of your website. You can modify or hide the search box title depending on your preference.

Add the Google Custom Search to WordPress

Step 5: Customize the Google Search Engine

Up to now, you already have a Google custom search engine in action on your WordPress site. The last but not the least thing to do is change the settings of this search engine to make it more distinctive.

Head back to the Google Custom Search website and click the “Edit search engine” option on the sidebar. Choose “Look and feel” and you will see multiple fields, including “Layout”, “Themes”, “Customize”, and “Thumbnails”.

In the “Layout” section, you can define the way that the search box and search results will be displayed on your site. As the following image shows, search results are presented in an overlay mode by default. If you make no change to this layout mode, remember to configure the corresponding setting of the WP Google Search plugin to make it work alright.

Change the Layout

Also, it is possible to make some individualized changes in the “Themes” section. You can switch the “Default” theme to the one you desire. Hover the mouse pointer to get a brief description of how it will be on your site before making the final choice.

Switch the Theme

Finally, in the “Customize” section, you can modify the font, border color, and background color of the search engine, which is to some extent a matter of aesthetics. Similarly, do not forget to save changes.

Customize the Search Box

Now, you can visit your site to see the Google custom search available for users to get target contents of your site in an efficient manner.