This tutorial explains how to integrate Google Custom Search with the Canvas theme by WooThemes. The Google “Two page” layout is used where the search box is on one page and the results are displayed on another page in the same window. This technique also works for WooThemes Spectrum.

Google Custom Search Engine

Google Custom Search enables visitors to search your web site with Google and is far superior to the default WordPress search feature. This tutorial assumes you already have a Google Custom Search Engine account (it’s free) and the Canvas theme installed.

The Google Custom Search box is located at the top right corner of the header on HandymanHowTo.com where it’s easy to find by visitors:

Searching for “liberty pump” displays the following Google Custom Search results on a page within the website for a seamless user experience:

Google Custom Search Integration Steps

The summary steps to integrate Google Custom Search with WooThemes Canvas are:

1. Create a Search Results page template (PHP source code file).
2. Create a new Page in WordPress to display the Search Results.
3. Configure a Google Custom Search Engine for your website.
4. Edit the Search Results page template to add the Google Custom Search Results javascript code.
5. Paste the Google Search Engine javascript code into your header.php file before the closing </head> tag.
6. Update the custom.css to limit the size of the Google Search Box.
7. Paste the Google Search Box javascript code into the WooThemes Canvas Top Ad.

Doing the steps in the above order will ensure your website is consistent (no change to the site display or user experience) during development. Need a coffee break? No problem! Take your time because only at the final step will the Google Custom Search engine become visible to your users and working properly.

A detailed walk-through of each configuration step follows below. I’m running WordPress v3.5 and WooThemes Canvas v5.0.13.

Create a Search Results Page Template

For the “two page” Google search layout, the search results are displayed in a full width WordPress Page named “Search”. The Search Page content is driven by the Google Custom Search Engine code placed in a PHP Page Template named gcsesearchresults.php. The names for WordPress page and page template PHP file can be anything you want so long as everything matches in the configuration steps.

To create the Search Results Page Template:

• Copy the Canvas theme page.php file in /wp-content/themes/canvas/page.php file to /wp-content/themes/canvas/gcsesearchresults.php.
• Edit the gcsesearchresults.php to give it the WordPress Template Name “SearchResults” and strip out the sidebar code so the search results display as full width page content. For WooThemes Canvas v5.0.13, the gcsesearchresults.php code with the Template Name and Google Search Element version 2 code is:

• Save the gcsesearchresults.php file.
  The directory and file name is /wp-content/themes/canvas/gcsesearchresults.php

Note: As of this writing (December 2012), the Google Custom Search Element V2 search results code tags are:

Use the current Google Custom Search Engine tags (see the following steps for how to get the code) if these happen to change in a future release.

Create the WordPress Search Results Page

The Google Custom Search Engine is configured for the “Two Page” format where the search results are displayed on a page within the website. Do the following to create the Search results page:

1. Login to the WordPress Dashboard for your website.
2. Go to Pages → Add Page on the left dashboard menu.
3. Enter the following values:
   • Page Name: Search
     Verify the Permalink (page URL) is: http://yourwebsite.com/search/
   • Template: SearchResults
   • Layout: Full Width
4. Save the new page.

You may ask: “Why can’t I just paste the Google Search Results javascript tags

into the Page with the Text editor?”

Great question! The reason you can’t paste the javascript tags into the Page via the Text editor is WordPress will mangle the tags! It doesn’t matter if the tags are wrapped in Code … /Code or whatever. WordPress will still mangle the tags. This is why the Google Search Results tags were put in a Page Template via gcsesearchresults.php, plus it disables the sidebar for the full width page content.

Google Custom Search Engine Look & Feel

I won’t cover the fundamentals of creating a Google Custom Search Engine here because it’s a straightforward process with extensive online help. You can always go back an tweak your Google Custom Search Engine via the Google Control Panel.

This tutorial picks up at the Google Custom Search Engine Look & Feel configuration:

Configure your Google Custom Search Engine in the Look and Feel section as follows:

1. Choose a layout → Two page.
2. Choose a layout for Image Search Results → Classic
   Any image layout is OK here: Classic, Column or Popup. I preferred Classic.
3. Choose or customize a style → Minimalist

   

   Google Custom Search Engine: Look and feel – Minimalist Style

   I chose the Minimalist style because it has a clean look and best matched my website, however you can choose a different style but know that the Search Box and Button may look very different.

4. Click the Customize button under the Minimalist style icon (see the above screen grab) to display color customization section. My site uses a black and gold color scheme, so I chose colors to match. Make the appropriate color choices to blend in with your site here. The Preview will update and you can test how the search results will look. Experiment!
   

Click Save & Get Code…

Google Custom Search Engine Code

After clicking the Save & Get Code… button on the Look and feel menu, the Control Panel – Get Code screen is displayed:

Specify the search results details

Enter the Search Page URL (a.k.a. slug) for the WordPress Search Page permalink created previously, for my site it’s https://www.handymanhowto.com/search. Your URL should be http://yourwebsite.com/search/ where “yourwebsite.com” is replaced with your domain name. This tells Google Custom Search were to display the search results on your website:

Search Results Code in header.php

The search results code consists of two parts:

• The Google Custom Search Engine core code that must be placed in the WooThemes Canvas header.php file before the closing </head> tag as highlighted in the red box.
• The search results javascript tags to placed in the gcsesearchresults.php Search Page Template.

Edit header.php

Add the Google Custom Search Engine core code to header.php by doing the following:

1. Login to your WordPress server hosting account.
2. If you have CPanel, open File Manager (it’s user friendly!), or you can use the shell command line.
3. Navigate to the directory /wp-content/themes/canvas
4. Make a copy of header.php.
   Name the copy header.php_original so you’ll have it in case something goes wrong and you need to restore it.
5. Edit header.php and paste the Google Custom Search Engine highlighted in red in the above screen grab.
   For WooThemes Canvas v5.0.13, the new header.php file with the Google Custom Search Engine code pasted before the </head> tag.
   [button style=”download” link=”https://www.handymanhowto.com/wp-content/uploads/downloads/WoothemesCanvasGoogleCustomSearchCode-header.zip”]Click to Download header.zip[/button]
   Note: The var cx = ‘XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY‘; will be your Google Publisher ID.
   Remember to rename the file in the downloaded .zip to just “header.php“.
6. Save modified header.php file.

Verify the Search Results Page Template

Double check that the search results tags highlighted in the purple box below are the same that were placed in the /wp-content/themes/canvas/gcsesearchresults.php Page Template file in the Create a Search Results Page Template instructions earlier in this tutorial. It’s unlikely the generic

gsce:searchresults-only

tags have changed since this writing, but best to verify.

Edit the Canvas Theme custom.css

Edit the custom.css file in /wp-content/themes/canvas/ and paste the follow CSS code at the end of the file. The new rule will limit the size of the WooThemes Top Ad to 300 pixels wide and ensure the Top Ad is placed at the right side of the header, otherwise the Google Search Box will expand to the full width of the header in some web browsers.

/* Set the width and position of the Woothemes Canvas Header Top Ad
for the Google Custom Search Box.
*/
#topad {
width: 300px;
float: right;
}

Create the Search Box in the WooThemes Canvas Top Ad

Almost done! The WooThemes Canvas theme has a convenient 468×60 Top Ad space in the site header that will be used for the Google Custom Search Search Box code.

1. Login to your WordPress Admin account.
2. On the Dashboard tool bar, click Canvas → Theme Options → General Settings → Advertising.
3. Enable Ad (Ad – Top (468×60)): Checked
4. Paste the Google Custom Search Box code in the Adsense Code area.
   The Google Search Box code is highlighted in green:

• The default white text color of the Google Search Box button contrasted poorly with the light gold/yellow button background color that I had customized in the Google Look and Feel control panel. I therefore added a bit of CSS style code to change the search button font color to black. You can omit this style code or change the “color: #000000;” to something that matches your color scheme.

  </pre>
  <style type="text/css"><!--
  .cse input.gsc-search-button, input.gsc-search-button { color: #000000; }
  --></style>
  <pre>

• Click the Save All Changes button.

You are done! The Google Custom Search should now be fully operational on your website! Test the Google Custom Search and also view it in different web browsers.

Note: Microsoft Internet Explorer 8 and 9 ignored the color changes I made in the Google Look and Feel control panel and the search button font color. I’m not sure why IE8/9 does this. My custom colors were displayed correctly in FireFox and Chrome running on Windows 7 and Safari on the iPhone.

Hope this helps,

Bob Jackson