Adding Google Adsense Custom Search to Wordpress ...

So, Adsense has a newish custom search tool for adding to your sites which I rather like. It is flexible and can be embedded easier than the previous searches. The major benefit is the ability to have the search results display on a results page of your choice rather than a standard full page Google-looking results page. This of course means seemless integration with your theme and generally better user experience.

There are plugins that will do this for you including Google Custom Search, and Easy Adsenser the latter I use for displaying adsense on this blog and I would certainly recommend. However, when it came to the custom search I found them both lacking so I decided to roll my own. It is not the most elegant solution; I would rather this functionality be in a plugin form so as to separate it from my theme files making it easier to upgrade my theme.

After a bit of experimentation and a key discovery, it was pretty easy for me to DIY the custom google search directly into my theme files. Here’s how I did it:

Implementing the Google Custom Search

First, go to Adsense and get your Custom Search code for the initial search box and the code for the results page. Yours will be different than the examples I use here so get your own if you want it to work right.

Wordpress generally uses 2 theme template files to perform searches: searchform.php and search.php. Search Form basically is the search box and submit button that you can put in a widget in your sidebar or include directly on a page. When you use searchform.php to submit a search, the results are automatically displayed on a results page using search.php as the template. The key step to note is how this automagically happens. Here’s my searchform.php:

    <form method=”get” id=”search_form” action=”<?php bloginfo(’home’); ?>/”>

    <form action=”http://1isa2isb.com/index.php?” id=”cse-search-box”>
    <div>
    <input type=”hidden” name=”cx” value=”partner-pub-2104946415586713:eq89vrj188e” />
    <input type=”hidden” name=”cof” value=”FORID:11″ />
    <input type=”hidden” name=”ie” value=”ISO-8859-1″ />
    <input type=”text” name=”q” size=”20″ />
    <input type=”submit” name=”sa” value=”Search” />
    <input type=”hidden” name=”s” value=”Search” />
    <input type=”hidden” name=”submit” value=”" />
    </div>
    </form>

    <script type=”text/javascript” src=”/cse/brand?form=cse-search-box&amp;lang=en”></script>

    </form>

The basic structure here to look at is:

    Wordpress Form

    Google Custom Search Code

    End Wordpress Form

The key is there are two additional lines (in bold above) that are added to the Google Custom Search Code that don’t affect the code working correctly but do allow wordpress to automatically display the results on search.php.

    <input type=”hidden” name=”s” value=”Search” />
    <input type=”hidden” name=”submit” value=”" />

You can also change the size of the search box itself by adjusting the number in the line: <input type=”text” name=”q” size=”20″ />

Next is creating your search.php file. Here’s mine:

    <?php get_header(); ?>
    <div id=”cse-search-div”>
    <div id=”cse-search-results”></div>
    <script type=”text/javascript”>
    var googleSearchIframeName = “cse-search-results”;
    var googleSearchFormName = “cse-search-box”;
    var googleSearchFrameWidth = 500;
    var googleSearchDomain = “www.google.com”;
    var googleSearchPath = “/cse”;
    </script>
    <script type=”text/javascript” src=”http://www.google.com/afsonline/show_afs_search.js”></script>
    </div>

    <div id=”search-sidebar”>
    <?php include (TEMPLATEPATH . ‘/sidebar.php’); ?>
    <?php include (TEMPLATEPATH . ‘/r_sidebar.php’); ?>
    </div>
    <?php get_footer(); ?>

The basic structure here to look at is:

    Include your Header

    Wrap your Google Results code in a div (for styling purposes only, optional step)

    paste you Google Custom Search Results code

    Include your Sidebars

    Include you Footer

 Original Source:
http://1isa2isb.com/adding-google-adsense-custom-search-to-wordpress