Google Custom Search Integration with WooThemes Fresh News 2.0 – Part 1

Newly revised and updated for Fresh News 2.0!

I wanted to replace the WordPress search engine with the Google Custom Search Engine (CSE) for better results and to take advantage of Adsense for Search. While there are several CSE integration tutorials for WordPress and even a plugin, none specifically addressed Woo Themes. My efforts were further frustrated because the coding strategies outlined in the existing tutorials didn’t entirely work for me and the WordPress plugin failed to install with a PHP parse error.

My requirements for Google Custom Search are:

• Search box must appear in the same position as the default search box to the top right in the theme header.
• Due to the limited width of the FreshNews DIV element (block level container) in the header for the search box, the “Search” button needed to appear below the text input control instead of to the right.
• The side bar must not be displayed on the Google Search Results page, because Google takes the full page width (600 pixels) and the sidebar will overlay the search results.

Google Custom Search Engine Demo

Go to www.handymanhowto.com to see the Google Custom Search integration with Fresh News 2.0. The following illustrates the Google Custom Search box (red arrow):

HandyManHowTo.com - Google Custom Search

and the Google Custom Search results page for the phrase “pvc pipe”:

HandyManHowTo.com - Google Custom Search Results Page

Google does an excellent job of indexing and searching your site.

How to integrate Google Custom Search to Fresh News 2.0

• Go to http://www.google.com/coop/cse/ and register for an account. If you already have an Adsense account, login with those credentials.
• Create a New Search Engine.
• Under the “Look and Feel” tab, choose the first style with the watermark. Click on the following image for a larger view.

Google Custom Search Engine - Look and Feel

On the Code tab:

• choose the iframe option;
• specify a URL http://your_domain_name/search/
• place advertising on the Right.

Google Custom Search Engine - Code

Copy the “Search box code” and “Search results code”. The code samples for my site are:

Search box code

<style type="text/css">

@import url(http://www.google.com/cse/api/branding.css);

</style>

<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="006667729864162168081:5u85mytsil8" />

        <input type="hidden" name="cof" value="FORID:9" />

        <input type="hidden" name="ie" value="UTF-8" />

        <input type="text" name="q" size="31" />

        <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>

Note the key value highlighted above in red will be different for your web site.

Search result code

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

Click on the Make Money tab to link the Custom Search Engine (CSE) to your Adsense account. My CSE has already been linked with my Adsense account.

Google Custom Search - Make Money

This tutorial is continued in Part 2.

Hope this helps,

Bob Jackson

Be Sociable, Share!

• 

Copyright © 2013 HandymanHowTo.com   Reproduction strictly prohibited.