How to add Google custom search in a WordPress site

Share This:
Google custom search in a WordPress site

WordPress comes with a default search feature, which works reasonably well for very basic sites.

Many users, however, find that the default search has some shortcomings, especially for larger sites with a variety of content types.

For many queries, the baked-in WordPress search doesn’t find or display the appropriate results. This can become more and more frustrating as you build up your site with more and more content.

Many site owners find that they need more robust capabilities than the default WordPress search can provide. Fortunately, there is an extremely powerful search engine called Google, which you must have heard of.

You can actually harness the power of Google within the confines of your very own WordPress website. This means that when someone does a search on your site, Google will do the searching, but the results will be limited to content from your website and not from the rest of the Internet.

There are basically two ways to implement Google custom search in WordPress. One by installing a plugin and another manually adding it.

However, the easier one of the two is using a WordPress plugin. But, advanced users may prefer to integrate a custom Google search into their website manually, without the use of a plugin. This method involves editing your theme’s core files.

In this article, I’m going to cover both the options in detail. So, let’s start.

Implementing Google Custom Search using WordPress plugin

There are multiple plugins available in the market, but the best we could find is WP Google Search Plugin. The plugin is completely free and should work with any solid WordPress theme.

Using the WP Google Search Plugin

Step 1 – Install the WP Google Search plugin

  • Within your WordPress Dashboard, navigate to Plugins
  • Select “Add New”
  • Search for the WP Google Search plugin
  • Choose Install
WP Google Search
  • When the plugin is installed, click “Activate.”

Step 2 – Set Up a Custom Search

Before you start using the WP Google Search plugin, there are some steps you will need to take to get everything set up properly.

  • Once you’ve installed the WP Google Search, you’ll want to head over to Settings -> WP Google Search to set up the plugin.
WP Google Search Settings
  • You should see a field for “Google Search Engine ID.”
Google Search Engine ID
  • In order to get the required ID, you will want to visit the Google Custom Search page and register a custom search engine. Simply click the “Create a custom search engine” button.
Google Custom Search
  • To set up your custom search, you will need to enter your appropriate URL into the “Sites to search” field. In most cases, this will simply be the main URL for your site. Don’t use shortened URLs.
  • You can also enter more than one URL in the event that you want to search and display results from across multiple websites.
  • For specific queries, you also have some options here in terms of which content or what kind of content from your site you want Google to search.
  • Again, most users will simply want to enter their main website address, which will display results from across the entire site. But there are some other options:
    • For a site-wide search that includes everything on your site, just enter the main address of the site (such as www.yoursite .com).
    • To search an individual page, enter only the URL for that page (www.yoursite.com/single-page)
    • To only search specific types of content on the site, such as Posts or certain categories, you can enter the appropriate link for that information, depending on your permalinks structure within WordPress (such as www.yoursite.com/posts).
  • Select the language you want to use (English is the default).
  • Click the “Create” button.
Creating New Search Engine

Step 3 – Get Your Search Engine ID

Awesome! You have successfully set up your custom search engine. Before you add it to your WordPress site, however, there are still a few more things you will want to do.

  • On the Google Custom Search page, click the “Control Panel” button.
Google Custom Search Control Panel
  • Within the Control Panel, you will see a button for “Search engine ID”. This is the unique ID for your custom search.
  • Click that button and copy the code for your Search Engine ID.
Search Engine ID
  • Paste that code into the field in the WP Google Search Plugin for “Search Engine ID”
  • Click “Save” to save the Plugin settings within WordPress.
Google Search Engine ID Plugin Settings

Step 4 – Configure the Display

  • Back in the Google Custom Search control panel, you will want to select the “Look and Feel” option from under Setup.
  • Choose “Results Only”
Custom Search Display Configuration
  • Click the “Save” button.

Changes you make from within the Google Custom Search control panel will automatically update within WordPress once your Search Engine ID is saved within the WP Google Search plugin.

Working With the WP Google Search Widget

Now, your Google custom search is synced up with your WordPress site. To control the placement of the search field within your site’s layout, you will want to visit the Widgets section of your site.

  • From your WordPress Dashboard, navigate to Appearance -> Widgets
  • You should see an option for a WP Custom Search widget amongst the available widgets.
  • Drag and drop the widget into your sidebar where you would like the search to appear.
Custom Search Sidebar Widget
  • Click “Save” to update the widget settings
  • You should now be able to see the custom Google search appearing in the sidebar on the front-end of your website.
Google Search Widget

Customizing the Look of Your Search

Depending on which theme you are using and the overall appearance of your site, the default settings for the Google custom search may not fit with your aesthetic. Fortunately, there are a lot of options. If you don’t want to write custom CSS, you can easily tweak the appearance of your search from within the Google custom search settings.

  • You can customize the appearance of the search field, button, and other elements within the Google Custom Search Control Panel.
  • To change fonts, colors, and other visual components, navigate to the “Look and Feel” section on the sidebar.
  • You can choose from a series of pre-made “looks” by selecting the “Themes” tab.
Google Custom Search Design Customization
  • Or, you can create your own custom look by selecting the “Customize” tab.
  • From here, you can alter the settings to create an even more customized appearance for your search.
Custom Search Look and Feel
  • When you have achieved the desired look, simply click “Save.” You do not need to copy and paste the code again. The changes will automatically be applied.
  • If you are not happy and want to start over, you can always hit the “Reset” button to go back to the default look.

You have now successfully added Google Custom Search to your WordPress site.

Does your WordPress site has default search or Google custom search? Let me know in the comments section.

Share This:

Popular on WPSteam Right Now!

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 22 other subscribers

I need help with...

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 22 other subscribers

I need help with...