Google Custom Search Engine: How to Add Google Search in a WordPress Site?

Why use Google Custom Search Engine in WordPress?

The default search feature within WordPress often fails to find relevant results. There are plenty of paid search plugins for WordPress, such as SearchWP. Yet, you need to manage them and it slow down your server resources.
Using Google Custom Search Engine in WordPress is a great alternative.
It consists of the following benefits:

• a reliable and powerful search feature
• that limits the search to your website only
• run from your own WordPress site
• in a speedy way
• with no maintenance or updates needed

Ways to insert Google Search Engine in WordPress

There are two main ways to add Google Search Engine into WordPress:

1. Plugin: Add Google Search in WordPress with a Plugin
2. Manual: Add Google Search Manual

1.Plugin: Add Google Search in WordPress with a Plugin

The first method is Add Google Search in WordPress with a Plugin.
WP Google Search is a handy plug-in to use. Without modifying your WordPress theme files. This method suits beginners.

1. Visit "Settings"to setup the "WP Google Search"plugin.
2. The plugin will ask you to provide a Google Search Engine id.
3. Visit the Google Custom Search Engine website.
4. Click on New Search Engine link on the left.
5. Provide your "WordPress site’s URL" in ‘Sites to Search’ field.
6. Choose the "language" of your website.
7. Click on the "Create" button to continue.
8. Click on the ‘Search engine ID’ button.
9. Copy your Google custom search engine ID.
10. Click on the ‘Look and Feel’ section.
    Under the layout tab, select "results only".
11. Choose "Layout for search results page".
12. Click on the "Save" tab at the bottom of the page.
13. Login to your WordPress site.
14. Search "Engine ID" in the WP Google Search settings page.
15. Click on the "Save changes" button to store plugin settings.
16. Visit "Appearance" and go to "Widgets Page".
17. Look for "WP Google Search Widget" in the list of available widgets.
18. Drag and drop the widget to the sidebar you want to display.
19. Click on the "Save" button to store your widget settings.
20. Now visit your website to see the Google Search widget in action.

2.Manual: Add Google Search Manual

The second method is Add Google Search in WordPress manual. For this modifying the WordPress theme file is needed. This method suits advanced users only. Backup your WordPress site before making any changes.

1. Visit the Google Custom Search Engine website.
2. Click on New Search Engine link on the left.
3. Provide your WordPress site’s URL in ‘Sites to Search’ field.
4. Choose the "language" of your website.
5. Click on the "Create" button to continue. Google will now create your custom search engine and will show you a success message with links to further actions.
6. Click on the "Get Code" button to continue.
7. Copy the code in the text area, you will see on the next screen.
8. Connect to your website using FTP.
9. Go to the /wp-content/themes/your-current-theme/ folder.
10. Replace the theme folder with the name of your current theme.
11. Locate the "searchform.php" file in your WordPress theme directory.
12. Download this file to your computer.
13. Open the file in a plain text editor like Notepad.
14. Delete all contents of the file.
15. Paste your Google custom search engine code.
16. Save the file.
17. Upload the file back to your WordPress site using FTP.
18. Login to WordPress. Choose "Appearance" and "Widgets".
19. Drag and drop the Search widget into your sidebar.
20. Click "Save" to store your widget settings.
21. You can now visit your website to see the Google search in action on your WordPress site.

Customize Google Custom Search Engine Layout

After Google Custom Search Engine installation. It is now time to customize the layout in accordance to your website. Here is how to do that:

1. Go to Google Custom Search website.
2. Click Edit search engine.
   This will show settings for your custom search engine.
3. Click on "Look and Feel" from the sidebar.
4. Choose one of Google custom search pre-made themes available.
5. Click on "customize" to choose your own font, border, and background colours of Google custom search.
6. "Save" your changes.

TIP: You don’t need to paste the code again, these changes will be automatically applied to your search form.