Update: This tutorial was written in 2010. Google has since deprecated the iFrame code shown in this tutorial. Please see the new tutorial How to Integrate Google Custom Search with WooThemes Canvas (which also applies to Spectrum) which uses the new Custom Search Engine Element v2 code.

———

This tutorial explains how to add Google Custom Search to the WooThemes Spectrum theme for WordPress and customize Google Custom Search Box look and feel using CSS style rules in the theme custom.css file. The Google Custom Search Engine (CSE) code is not modified in any way and the look and feel modifications are fully compliant with Google’s Terms of Service.

The customized Google Search Box styling is illustrated by the red arrow in the following figure:

Google Custom Search Box – CSS Customized Look and Feel

Compare the customized search box (above) to the default look and feel here:

Google Custom Search Box – Default Look and Feel

The problems with the default styling are the Google search box is too tall and the Search button color doesn’t match my theme. I thought it a looked a bit crude and out of place.

Google Custom Search Engine (CSE)

Google Custom Search really adds value to your website by making it fast and easy for visitors to find your content, and it’s a huge improvement over the default WordPress search function. A nice benefit is monetizing your search results with Adsense for Search. The following are the results for a search on “Dewalt” on HandymanHowTo.com:

HandymanHowTo – Google Custom Search Engine Results

The results page fits perfectly and looks professional. Nice!

Just tell me how to Customize the Search Box CSS

If you already have Google Custom Search on your WordPress website and just want to know how to customize the search box CSS, please skip to Part 2.

Previous Tutorial for WooThemes Fresh News 2.0

You can find my prior Google Custom Integration tutorial for Fresh News here, which is now almost two years old.

I recently converted HandymanHowTo.com from the WooThemes Fresh News to the much newer Spectrum theme to take advantage of the numerous features offered in Spectrum. I have been very pleased with the upgrade to Spectrum that has resulted in a ~30% increase in page views per visitor! I attribute the increase in page views to the high impact and information rich layout of Spectrum that encourages visitors to look around.

Create a Google Custom Search Engine

• Click this link to create: Google Custom Search Engine (CSE)

• Click “New Search Engine” in the left menu column and the wizard will walk you through the 3-Step process.
  • At Step 3 “Get the Code“, ignore the program code and click the “Change the look and feel” link under Next Steps.
  • The Control Panel – Look and Feel screen is displayed:

Google Custom Search Engine – Control Panel – Look and Feel

Search element Hosting Option

The initial 3-Step Search Engine wizard creates a single piece of code for a “Search element” hosting option. We don’t want this because the search box and search results are combined, meaning the search box can only be accessed when viewing a dedicated WordPress page for searching. (Aside: If you do want this, just paste the Search Element code into the HTML of your WordPress search page and you’re done. Open the search page and you’ll see the search box.)

What’s needed is a search box that can be placed anywhere independently of the search results. For example, a search box located in the site header (as I’ve done) or in the sidebar.

iFrame Hosting Option

We want the iFrame hosting option, so select this option in the Control Panel (see screen grab above).

The iFrame hosting option creates two pieces of code:

1. Search Box Code – to be pasted into the your header, sidebar or footer of your site.
2. Search Results Code – to be pasted into the HTML of your WordPress search results page.

The two pieces of the code provides the freedom to place the search box anywhere on your website.

Choose a Style and Branding Option

I chose the default style which matched the white page background of HandymanHowTo.com and “Branding below the Search Box” on a black background to match my site header area. Select whatever matches your preferences as it’s not central to this tutorial.

Get Code

After choosing iFrame and your style/branding options, click the Get Code button (see the figure above) to open the Get Code Control Panel screen:

Google Custom Search Engine – Control Panel – Get Code

Enter the URL in your site where you want to the search results to appear. In later steps, a new WordPress page named “search” will be created to display the search results, so enter the URL:

http://<your site name>/search

In my example, I entered:

http://www.handymanhowto.com/search

The search box code is updated as you type with the URL.

Search Box Code

Copy the Search Box Code and save it as a plain text file for later. Note that your URL and partner-pub ID will be different than mine as highlighted here:

@import url(http://www.google.com/cse/api/branding.css);
<div class="cse-branding-bottom" style="background-color:#000000;color:#FFFFFF">
<div class="cse-branding-form">
<form action="http://www.handymanhowto.com/search" id="cse-search-box">
<div>
        <input type="hidden" name="cx" value="partner-pub-2484226848394294:ol7q5jvxc0l" />
        <input type="hidden" name="cof" value="FORID:10" />
        <input type="hidden" name="ie" value="ISO-8859-1" />
        <input type="text" name="q" size="30" />
        <input type="submit" name="sa" value="Search" /></div>
</form></div>
<div class="cse-branding-logo">
    <img src="http://www.google.com/images/poweredby_transparent/poweredby_000000.gif" alt="Google" /></div>
<div class="cse-branding-text">
    Custom Search</div>
</div>

Search Results Code

Copy and save the Search Results code to a file for later:

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 940;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

Create a Search Results Page in WordPress

A WordPress page named Search is created to display the Google Custom Search Results. To create a Search page:

1. Log into to your WordPress Admin Panel.
2. Click Pages → Add New in the left menu bar.
3. Name the page: Search
4. Verify the Permalink (page URL) is http://<yoursite>/search/
   If not, click the Edit button to correct it.
5. Important! Click the HTML tab on the editor menu bar.
6. Paste the Google Custom Search Results Code into the page body.
7. Select the Full Width page template.
8. Uncheck the allow comments and trackbacks/pingbacks options.
9. Publish the page.

Search Page – Full Width Template – Google Custom Search Results

Search page template – disable comments and pingbacks:

Search Page – Disable Comments and Pingbacks

This project is continued in Part 2.

Hope this helps,
Bob Jackson

Be Sociable, Share!

• 

Copyright © 2013 HandymanHowTo.com   Reproduction strictly prohibited.