How To Replace Wordpress Search With Google Custom Search

Google provide custom search feature for webmaster to use in their website. Custom search will search all your website articles by google search engine. This can give you below advantages.

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

1. How To Apply Google Custom Search?

  1. Go to https://cse.google.com/cse/ and login with google account. Then click New search engine link in 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 Edit search engine list. Click it in the list, it will show it’s detail info in right panel. There are four menu item in left panel and four tab in right panel.
    edit google custom search engine detail info
  3. Click Look and feel menu link in left panel, it will let you choose the search engine layout. Our example select 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 layout, you may need use only one JavaScript code. Do not forget click Save button to save your selection.
    google custom search engine layout
  4. Click Search features menu link in left, and click Autocomplete tab in right panel. Turn on Enable autocomplete button.
    custom search engine autocomplete
  5. Now click the Setup menu link in left again, click Ads tab in right. In this page turn on Search Engine Monetization.
    google custom search engine monetization
  6. Now click Get code button in Setup page Basics tab to get JavaScript code. Because we choose Two page layout, you will get JavaScript code for both search form and search result, save those JavaScript code carefully.
READ :   How To Modify WordPress Header & Footer

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

2.1 Add Custom Search Box In WordPress.

  1. Login to your WordPress website as administrator.
  2. Click Appearance —> Widgets menu item in 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 Save button.
    add google search box in wordpress appearance widgets primary navigation bar
  3. Now you can see google custom search engine search box in web page as below. You can input search keyword and click Search button to use it.
    google custom search engine search box

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 in that page.

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

2.3 Combine Custom Search Result Page In Adsense.

Now we have created both custom search engine search box and search result page, but how to tell google to display the search result in the custom page when user search. Below is the steps.

  1. Go to https://adsense.google.com, login with google account.
  2. Click My ads —> Search —> Custom search engines menu item in left. Then you can see the custom search engine which you created in section 1.
    google adsense search custom search engines list
  3. Click the custom search engine name to go to it’s detail settings page. Click + icon to Expand Search results section at page bottom. Select display results on my website radio button. Input the search result page url in “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.
    input search result url in custom search engine detail page

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.