How To Replace WordPress Search With Google Custom Search

Google provides a custom search feature for webmasters to use on their website. A custom search will search all your website articles by the google search engine. This can give you the below advantages.

1. Use powerful google search capability to help users find the desired information in your website accurately.
2. Because the search process takes place on google servers, so this can reduce your web server pressure.
3. You can earn money when users click the ads displayed in the search result.

1. How To Apply Google Programmable Search?

1. Go to https://cse.google.com/cse/ and log in with your Google account. Then click the New search engine link on the left top to create a new custom search engine.
2. Input your website domain name and click CREATE button, now you can see the newly created custom search engine in the Edit search engine list on the page left panel. Click it in the list, it will show it’s detailed info in the right panel. There are four menu items ( Setup, Look and feel, Search features, Statistics and Logs ) on the left panel and four tabs ( Basics, Ads, Admin, Advanced ) on the right panel.
3. Click the Look and feel menu link in the left panel, it will display four tabs on the page right side, they are Layout, Themes, Customize, Thumbnails.
4. Click the Layout tab on the Look and feel page right panel, then click the Web search item, it will let you choose the search engine layout.
5. In our example, I select the Two-page layout. This layout will have two JavaScript code snippet, one is used to show search form, the other is used to show search result. If you select other layouts, you may need to use only one JavaScript code. Do not forget to click the Save or Save & Get Code button to save your selection.
6. Click the Search features menu link on left, it will show five tabs on the page’s right side, they are Promotions, Refinements, Autocomplete, Synonyms, Advanced.
7. Click the Autocomplete tab in the right panel. Turn on the Enable autocomplete button.
8. Now click the Setup menu link on left again, click the Ads tab on right. On this page turn on Search Engine Monetization at the page bottom area.
9. Now click the Get code button on the Setup page Basics tab to get JavaScript code for both the google search box and search result. It will first display the Get code for search box, and you need to click the Next: Get code for search results button to get javascript code for the google search result. Save that 2 JavaScript codes carefully.

2. How To Add Google Programmable Search Feature In WordPress?

2.1 Add Custom Search Box In WordPress.

1. Login to your WordPress website as an administrator.
2. Click Appearance —> Widgets menu item in the left panel. Drag and drop a Custom HTML widget to the right sidebar. Paste google custom search engine search box JavaScript code in the widget. Click the Save button.
3. Now you can see the google custom search engine search box on every web page. You can input the search keyword and click the Search button to use it.

2.2 Add Search Result Page In WordPress.

Because our custom search engine layout is Two-page layout, so you should design a search result page and add search result JavaScript code to that page.

1. In the WordPress admin web dashboard, click the Pages menu item in the left navigation area and add a page named Search Result. The page can be accessed by url http://domain-name/search-result/.
2. Edit the search result page source code, paste the above custom search engine search result JavaScript code in it, and save the page.

2.3 Combine Custom Search Result Page In Adsense.

1. Now we have created both the custom google search engine search box and search result page, but how to tell Google to display the search result in the custom page when the user searches. Below are the steps.
2. Go to https://adsense.google.com, log in with your Google account.
3. Click Ads —> Overview menu item on the left page.  Then click the By ad unit tab on the right page.
4. Click the Search engine filter in the Filters area, then you can see the custom search engine which you created in section 1.
5. Click the custom search engine name to go to the detail settings page. Click + icon to Expand the Search results section on page bottom.
6. Select display results on my website radio button. Input the search result page url in the “URL where search results will be displayed” input box. Click Save and get code button to get the search box and search result JavaScript code and paste them in your WordPress-related area again. Now your website can use google search capability.
7. If you find the Two-page search engine Look and feel layout is not easy to implement, you can choose the Overlay layout in section 1. The Overlay layout is easier to use than the Two-page layout because it just needs one snippet of JavaScript source code.