Nedsferatu.com Blog

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://blog.nedsferatu.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

The only thing I changed in the google code was: var googleSearchFrameWidth = 500; I changed the width to 500px to better match my theme. I also wrapped the Custom Google Search Results code in a div so that I can more easily style the Google results. I believe I floated it left and floated my sidebars right but you can check the css if you have questions about it.

Remember to backup your old searchform.php and search.php before replacing them with the new files. Make it easy on yourself to roll these changes back if you don’t like them.

Conclusion

The major learning for me was the two lines in the searchform that allowed wordpress to automatically use my search.php. After that the rest was pretty straight forward. Check it out by using the search box at the top of the sidebars on the right. Let me know how it goes for you!

Related Posts:

• No related posts