HandymanHowto.com

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.

Go to www.handymanhowto.com to see the Google Custom Search integration with FreshNews. The following illustrates the Search Box and Results pages:

HandymanHowTo.com with Google Custom Search

and the Google Custom Search results page for the word “toto”:

Google Custom Search Results Page

How to add Google Custom Search to the FreshNews Theme

• 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

Create a Search Page

Make a full backup of your Wordpress site.

Login as the Site Admin to your WordPress blog.

Create a new page named Search.

• Edit the post slug if needed to ensure Permalink is http://your_domain_name/search/
• Click the HTML tab
• Paste the Google Search result code.
• Keep the default page template.
• Write down the Page ID as given in the URL of the web browser because it will be needed later. The Page ID is the number after the “post=” argument. In my case, the Search Page ID is 7:
  http://www.handymanhowto.com/wp-admin/page.php?action=edit&post=7
• Save and publish the page.

Click on the image below for a full size view.

Create a Search Page in WordPress

Changes to header.php

Edit the header.php file in the freshnews theme directory (e.g. /public_html/wp-content/themes/freshnews/header.php). The Search page will be excluded from the main menu; and the theme default search box code will be replaced the Google Custom Search box code.

The Search page will be shown by default in the menu bar at the very top of the web site. If a visitor to your site clicks on the Search menu item, an empty Search page will be displayed which is confusing to your visitor. To remove the Search page from the header menu, add the &exclude=<your Search Page ID> to the wp_list_pages() function as shown. Recall the Search Page ID was written down when the Search page was created (see above). The Page ID for my Search page is 7.

Exclude the Search Page from the Main Menu

Replace the default search box code in header.php as highlighted:

Code section in header.php to be replaced

with the Google Search box code as shown below. Also add the <br> HTML code as indicated to move the Search box submit button below the text input control.

Google Custom Search code update in header.php

The modified header.php file for my site is here: header.php

Remember: Your Search page URL, Page ID and Adsense Publisher ID values will be different from mine and should be changed in your version of header.php. Or you can use mine if you like giving me your Adsense revenue. (smile)

Changes to page.php

Edit the page.php template to disable the sidebar on the Search result page, otherwise the sidebar will overlay the Google search results. The new code logic checks the page slug to determine if this is the Search page.

Disable the sidebar on the Search Results page

The modified page.php file for my site is here: page.php

Save and test your new Google Custom Search Engine.

Remember, to re-edit the header.php and page.php templates if you install a FreshNews theme update.

Hope this helps,

Bob Jackson

Related Posts

• Integrate Google Adsense with the Fresh News Theme Sidebar Ad
• How to Repair a Leaky PVC Pipe Joint – Part 3
• How to Repair a Leaky PVC Pipe Joint – Part 2
• How to Repair a Leaky PVC Pipe Joint – Part 1
• How to Wire a Motion Activated Floodlight with an Insteon In-LineLinc Relay
• Insteon Home Automation Controller Overview – ISY-99i
• Replace a Worn Out Door Bottom Weatherstrip
• Finishing a Basement Bathroom – Part 12
• How to Build a 2×4 Deck Rail on a Concrete Patio
• How to Install an Ethernet Jack for a Home Network

Bookmark It!