How To Add Google Custom Search to Your Blog

This post is a rework to my oldÂ Combine Google Custom Search with the Default WordPress Search -article where I combined Google Custom Search with WordPress Regular search results.

I do this because, it is better to show that you are using Google Custom Search instead of making the search look like it is not Google Search. This will show your readers that they are about to enter Google Custom Search so the possible advertisement doesn't surprise them. It might be that the Google terms and conditions for AdSense for Search states that it is forbidden to "camouflage" the search to look like normal search, but I didn't check if it is so.

I didn't need to check, because there is proof that Google Custom Search is used MORE than the regular WordPress search (at problogdesign.com) and as we know that, we don't want to hide the fact that it is Google search, right?

How To Get Google Custom Search for Your Blog

Create the form in the Google AdSense:

Select to show the results in your own web page
Choose to only search from certain sites
Add your domain to the list of domains to search from and add "*" to the end
- e.g. zemalf.com/*
Customize the form by selecting style and colors that fit your blog
Set the result page as http://your_domain_name.com/index.php?
- e.g. http://zemalf.com/index.php?
Add the Google Custom Search form code to your blog, either directly to theme or through widget/plugin
Add the Google Custom Search results code to the search.php

How To Add the Google Custom Search Box to Your Blog

Add text-widget to your sidebar,
Add the search code directly to your them (replacing the old search form there is), or
Install a Google Custom Search -plugin

I recommend that you either use a text widget or , as it is good to minimize the need of plugins in your blog to maximize performance and compatibility when WP is upgraded.

How To Add Google Custom Search without a Plugin

Add the custom search form code to a text widget or your theme:

The Google Custom Search form code looks something like this (the partner id will be your own of course):

<form action="http://your_domain_name.com/index.php?" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-1234567890123456:abcde1-8uf8" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

Copy the code you get after creating the custom search and add it to your theme or text widget.

How To Add the Google Custom Search Results Code

To display the search results on your own blog and fitting to your WP theme, you need to edit the search.php file.

Add the Search Results Code to the search.php:

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

The most simple search.php can only have the search results code in it, or you can add your theme's header and footer in it.

<?php get_header(); ?>
*GOOGLE SEARCH RESULTS CODE IS HERE*
<?php get_footer(); ?>

If you want to have the WordPress regular search results on the same page (search.php) with the Google Custom Search Results, you can edit the custom search form like this you can do that too..

How To Combine Google Custom Search with Regular WordPress Search

Add hidden type "text" with name "s" to the form
Edit the form tag and add name for the form + javascript code to copy the search terms from "q" to "s"
- "s" is what WP uses to pass the search terms to the search.php

In the Google Custom Search Box code,

REPLACE:

</div>

WITH:

<input type="hidden" name="s" value="" />
</div>

and, REPLACE:

<form action="http://zemalf.com/index.php?" id="cse-search-box">

WITH: (all can be in the same line)

<form
  action="http://zemalf.com/index.php?"
  id="cse-search-box"
  name="searchform"
  onsubmit="document.searchform.s.value = document.searchform.q.value" >

..so we added the last to lines (name and onsubmit) to the form-tag, these copy the search term from "q" to "s". On the results page, the "q" is used to display the Google Custom Search results and the WordPress default "s" to display the regular results.

If you want to customize the colors of the search box or the results, you can edit the custom search properties in your Google AdSense "manage ads" control panel, so there is not need to edit the search box code or search results after you include them once.

If you have any questions or problems getting Google Custom Search to your blog, leave a comment or send me your question and problems through the contact form (on the contact -page)