Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 45: Add Google Custom Search Engine for WordPress

Google Custom Search Engine Home Page

Most WordPress guru’s dislike the built-in search function.  But, site search is key to any site.  You want your visitors to be able to find the content they are interested in.  When our tags, categories, landing pages, nav menu, etc., fail to find the content a visitor is looking for, they will often turn to the search function.  I know I do.  In this step we’ll learn how to add Google Custom Search Engine to our site.

Using our Google Account, we’ll sign into the Google Custom Search Engine page.

Click on the “New search engine” link.

Google Custom Search Add New

Fill in your site URL, language, and name, then click “Create”.

Setting Up Google Custom Search Engine

Google will provide a code snippet that we can use to plug into our site.  However, I’m not interested in the basic code and would like to do a little more customization.  Look below the code and click the “Edit your search engine settings” link.

Google Custom Search Engine Code

I’ve entered some information in the “Basic information” section and clicked the “Save Changes” button.

Google Custom Search Engine Basic Information

Next, click the Indexing link in the left column.  Then click the plus (+) sign for “URLs in a Sitemap”.  Click the drop-down and select “New Sitemap”. Place your sitemap URL in the box provided then click the “Index Now” button.  Google will inform you that indexing is in progress.

Google Custom Search Engine Sitemap

Next, click on the “Look and Feel” link in the left column.

Google Custom Search Look and Feel Page

I chose the highlighted layouts and style.  The “Two page” layout will allow us to create a designated page for displaying site search results.  Click the “Save & Get Code” button.  Leave this page open while we take care of a couple more items below.

Copy the search results code for use in our dedicated page.

Google Custom Search Engine Results Code

Since we chose to display the search results on a dedicated page, we will now create a new WordPress Page for the search results.

From your WordPress Dashboard click on Pages, then click “Add New”.  Give your page a title.  Click the “Text” tab and paste the code shown above into the page body.

WordPress Search Results Page

Click the “noindex” options as we don’t need the search engines crawling this page.  It will only ever be used for search results.

Noindex

Click “Publish”.  Make note of the page URL (permalink).

Return to your Google Custom Search Engine page that we left open above.  Enter your “Search Results” page URL into the box provided and click “Save Changes”.

Google Custom Search Landing Page

Next we need to add the Google search box to our site.  Copy the search box code provided from Google.

Google Custom Search Engine Code

I like my site search box to be at the top of the sidebar.  We can do this using a widget.  From the WordPress Dashboard screen click “Appearance”, then click “Widgets”.

Thesis 2 has provided a “Thesis >>Google Custom Search” widget in the list of “Available Widgets”.  Click and drag this widget to the top of the “Widgets 1” box on the right side of the screen.

Thesis 2 Google Custom Search

The Thesis Google Custom Search widget will open automatically.  Give it a title then paste in the Google search code that we copied above.  Click the “Save” button.

Thesis 2 Google Custom Site Search Widget

Your Google Custom Search Engine is now live on your site.  Refresh your home page to see the search function.

Google Custom Search Engine on Thrifty Zizel

Test your search function and you should see the results appear on the search results page you just created.

Google Custom Search Engine Results Page

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 3 comments… add one }
  • Sonny Davis August 9, 2014, 11:19 AM

    Why doesn’t the Search Results page show in the menu?

  • Doug Macklem August 31, 2014, 8:17 AM

    You probably could add the search results page to your menu but I’m not sure why you would want to. The page would be blank without searching for something first.

  • Dan Leigh September 7, 2014, 8:45 AM

    Hi Doug,

    Thanks so much for all of these tutorials, I have used at least 5 of them already. In particular this one, I am so excited to have a Google search box on my site now. It is 100 times better than the default Wordpress search.

Leave a Comment