Create a Search Results Page Template

A new WordPress page template is created to display the Google Custom Search Results. The standard page.php template is formatted with a center column to display the page content that’s designed for a sidebar; and therefore too narrow for the 600 pixel wide Google search results. Therefore, a new search results page template is created to display the full screen width.

Before you begin, make a full backup of your WordPress site … just in case.

Step 1: Copy the page.php template file to make a new search.php file

• This creates a search results page template.
• Use File Manager in cPanel to copy and rename the file.
• Place the search.php file in the /public_html/wp-content/themes/freshnews directory with the other page templates (e.g. header.php, footer.php, etc).

Step 2: Edit search.php file

Log in as the Site Admin to your WordPress blog.

Use the Theme Editor in the WordPress Admin Panel to edit the search.php Template File as shown in the following image.

• Add a Template Name Comment at the top, call it ‘Search Results’
• Comment out the centercol div element
• Delete the call to get_sidebar()
• When done, click Update File in the Theme Editor to save the changes.

Edits to search.php page template

The edits are generic and you should be able to reuse my search.php page template without modifications. You can get my file here: search.php

Create a Search Page to Display the Google Custom Search Results

• Create a new page named Search via the Page → Add New command on the left menu in the Admin panel.
• Edit the post slug if needed to ensure Permalink is http://your_domain_name/search/
• Click the HTML tab in the post editor.
• Paste the Google Search result code.
• Save and publish the page. This will create the Page ID.
• Edit the page again.
• 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 in the URL:
  http://www.handymanhowto.com/wp-admin/page.php?action=edit&post=7
• Assign the Search Results page template in the drop down menu as shown (lower left in the image below).
• Save and publish the page.

Click on the image below for a full size view.

Search Page for Google Custom Search

Next, the Google Custom Search box will be added to the page header.

Changes to header.php

Now we’ll add the Google Custom Search Control to the page header and make a cosmetic change suppress the Search page from showing in the main menu.

Cosmetic Change

The Search page is shown by default in the menu bar at the very top of the web page. If a visitor to your site clicks on the Search menu item, an empty Search page will be displayed, which is confusing.

To remove the Search page from the header menu:

• Edit the header.php file in the freshnews theme directory (e.g. /public_html/wp-content/themes/freshnews/header.php). You can make the changes to header.php using the WordPress Theme Editor.
• Add the code &exclude=<your Search Page ID> to the wp_list_pages() function as shown in the image below.
  → 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.

header.php - Exclude the Search page from Main Menu

continue to the next step…

Add the Google Custom Search Box to the Page Header

While still editing header.php, replace the default search box code as highlighted:

header.php - Default Search Code

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.

header.php - Google Custom Search code

The modified Fresh News v2.0.7 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)

Save and test your new Google Custom Search Engine.

Remember, to re-edit the header.php and possibly the search.php templates if you install a Fresh News theme update.

Hope this helps,

Bob Jackson

Bookmark It!

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

Bookmark It!