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 they 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
• runs from your own WordPress site
• in a speedy way
• with no maintenance or updates needed

Ways to insert Google Search Engine to WordPress

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

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

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

The first method is to add Google Search to 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 set up 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 the New Search Engine link on the left.
5. Provide your "WordPress site’s URL" in the ‘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. Log in 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 manually

The second method is to add Google Search to WordPress manually. For this, modifying the WordPress theme file is necessary. This method suits advanced users only. Back up your WordPress site before making any changes.

1. Visit the Google Custom Search Engine website.
2. Click on the New Search Engine link on the left.
3. Provide your WordPress site’s URL in the ‘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. Log in to WordPress. Choose "Appearance" and "Widgets".
19. Drag and drop the Search widget to 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 installing Google Custom Search Engine, it is now time to customize the layout in accordance with your website. Here is how to do that:

1. Go to the 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 the Google custom search pre-made themes available.
5. Click on "customize" to choose your own font, border, and background colours for 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.