Topics Map > IT Services > Training
Topics Map > IT Services > Software Support

WordPress - Replacing Search with Google Custom Search

This guide will walk through the steps necessary to create a custom Google search for a WordPress site, replace the WordPress site's native search tool, and formatting the search box and search results page.

Prerequisites

Access to the wordpressadmin@uwosh.edu account. The Web Application Developer in IT or the Director of Digital Marketing in UMC should have this information.

Set up the Search Engine

The first step is to create a Google Custom Search. This will apply Google's search algorithm and indexing to the WordPress site, and return results that are only from this site.

  1. To create a custom search engine, follow Google's instructions
  2. Click on Setup on the left menu, and then click the Admin tab on top. Here, add the user accountmanager@uwosh.edu.
  3. Click on the Ads tab and then turn off Show Ads. NOTE: this radio button might not be available until 48 hours after you've added the accountmanager@uwosh.edu as an admin to the search engine.
  4. Click on Look and feel on the left menu and select Two Page on the Layout tab.
    Image shows two page option selected.
  5. Go to the Google Custom Search tab you kept open and click "Save & Get Code"
    Save & Get Code
  6. Copy the entire code snippet inside the grey box and paste it in between the quotation marks in your text editor.

    Search box code

  7. On your WordPress site, login, and navigate to Settings > Google Custom Search Settings

  8. Paste the code you copied from Google into the text box where it says "Enter GCS Code"
    Enter GCS Code box
  9. Go to the last line of the code snippet and add this attribute to the opening <gcse:searchbox-only> tag: resultsUrl='https://uwosh.edu/????/search-results/'. Change ???? to the name of your site. Ex. for Information Technology, it would be resultsUrl='https://uwosh.edu/it/search-results/'.
    Google Custom Search code entered
  10. Click submit and you should receive a confirmation alert.
    Confirmation Alert


Create a search results page in the WordPress site

This walkthrough assumes that two-step search process is desirable, where a search entered in the search box on any page of the site will take users to a search results page--and this step deals with setting up that page. Other options can be researched and changed within the Google Custom Search tool.
  1. Log into the WordPress site and select Pages > Add New from the menu on the left. 
  2. Title the page "Search Results" and format it to match the other pages of the site.
  3. Create a text module to display the search results in the page.
    ExampleSearch Results Page Example
  4. Once you are ready to display search results, copy this text: <gcse:searchresults-only></gcse:searchresluts-only>
  5. Open up the module you created for the search results.
  6. Select the "Text" tab on the upper right of the content editor of the page.
  7. Paste the text into the content box. This will be the only text needed for this container for the Custom Google Search to display the results. It should look similar to image below.Paste Text into the Content Box
  8. Click update to save the change on the Wordpress page.

Test the new search

View any page of the Word Press site and click the magnifying glass at the top to search the site. A search box should appear with the Google watermark in it. Run a search and make sure that search results displayed are only from this Word Press site, do not include ads, and are readable.

Note: You may need to reload the page once or twice to see the search box come up. If you still don't see it after a few refreshes, try clearing your cache and try it again.



If you need further assistance please contact the Information Technology Help Desk at 920-424-3020 or helpdesk@uwosh.edu




Keywords:Guide, WordPress, "how to"   Doc ID:56354
Owner:Brian L.Group:UW Oshkosh
Created:2015-09-15 09:57 CSTUpdated:2019-03-21 15:01 CST
Sites:UW Oshkosh
Feedback:  3   0