Google Custom search is a powerful tool to give your readers a chance to search for content from your blog, web or whatever sites you define for the search. WordPress comes with default search which presents blog posts and/or pages with the search terms you used.
Remember to check Google's Terms & Conditions when adding the Google Custom Search. You are not allowed to hide the fact that you're using Google Custom Search. Reworked instructions are here How To Add Google Custom Search to Your Blog.
I wanted to combine these two. I like the default as the WordPress search gives clear blog post links and integrates automatically into the WordPress Theme and templates. On the other hand, Google Custom Search is more accurate in a sense and is "automatically" monatized through Google Adsense.
This article shows you how to get the best of both words, custom search results from Google, along with Adsense ads and the WordPress search results that display the most relevant posts from your blog.
Note that the most simple way to add Google Custom Search Engine (GCSE) to your blog, is to use a plugin and corresponding widget, but I rarely say no to a chance to mess with javascript and php, so here we go!
How To Combine Google Custom Search and AdSense with the Default WordPress Search
Search Functionality in WordPress
In most WordPress Themes there are two php-files that handle the search form and search results:
- searchform.php
- search.php
searchform.php is the actual search form and it can be displayed anywhere in your blog. Most templates display search form at the top of the sidebar or in the header, but your template might have it elsewhere or nowhere at all. If your template doesn't have default search you can add it yourself, or you can use a search widget to display search.
search.php is used to display search results, based on the search query from the search form displayed by searchform.php.
Setting Up Google Custom Search
- Go to Google AdSense
- If you don't have a Google Account yet, Create a Google Account now, it's free and you get access to all kinds of services for free.
- In the AdSense control panel, go to the 'AdSense Setup' tab
- Click on the 'AdSense for Search'
Now it's time to setup the Google Custom Search
- Choose "only sites I select"
- Enter your domain + "\*" to the Selected Sites -list. e.g. zemalf.com/*
- Check the other options, which should be ok by default. Hit Continue >>
- Edit the looks of the search box or if the Default "Look & Feel" is OK, Hit Continue >>
- Choose "Open results within my own site", and
- Enter URL where search results will be displayed: http://yourdomain.com/index.php? - e.g. http://zemalf.com/index.php?
- Don't forget the question mark (?) after the index.php
- Edit the search results palette and options, when satisfied, hit Continue >> again.
- Give name for your Search Engine (visible for you at Google AdSense), e.g. Search from Zemalf.com
- Hit Submit and Get Code
On the next page, you will see two boxes, one with Search Box Code, and the other with Search Results Code.
- The Search Box Code will go into searchform.php
- The Search Results Code will go into search.php
Editing the WordPress Template and Inserting the Google Custom Search
Step 1 : searchform.php
- Go to Theme Editor. (Appearance >> Editor in WordPress 2.7.x)
- Open searchform.php (or edit it directly through ftp or such)
- Look for the original search form, which starts with <form> and ends with </form>
- Take a copy of the original form, and paste it to text editor, like Notepad++
- Now, replace the original form in the searchform.php with the Google Search Box -code (the one with <form> and such)
- Insert this line between the Submit line and </div>
<input type="hidden" name="s" value="" />
- The "s" is used by the default WordPress Search, as Google Custom Search uses "q"
- There should be this kind of text inside the form tag:
<form action="http://zemalf.com/index.php?" id="cse-search-box" >
- Add the name variable and onsubmit -command inside the form tag, like this:
<form action="http://zemalf.com/index.php?" id="cse-search-box" name="searchform" onsubmit="document.searchform.s.value = document.searchform.q.value" >
if your custom theme uses some other name than "searchform", replace searchform with whatever you want, just make sure you replace it in the name="" and inside onSubmit as well. With this we can pass the search terms in the s-variable (used by WordPress search) as well as the q-variable (used by the Google Custom Search).
If your original search form (you have copied on the text editor) had some custom names or id's, try to put them in without messing the Google search code. I added the id and class variables from my theme. You can also add default value to the text input if you like, like this (using fancy javascript to change it based on user activity).
In the end, you will have something like this in your searchform.php:
<form action="http://yourdomain.com/index.php?" name="searchform" id="searchform" onSubmit="document.searchform.s.value = document.searchform.q.value" >
<div>
<input type="hidden" name="cx" value="partner-pub-YOURownAdSenseCODEwillBEhere" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="searchbox" class="searchfield" value="Search from yourdomain.com" onfocus="if(this.value == 'Search from yourdomain.com') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search from yourdomain.com';}" />
<input type="submit" name="sa" value="Go" class="searchbutton" />
<input type="hidden" name="s" value="" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
- You should now have functioning search in your blog, but only the default WordPress Default results are visible.
Step 2 : search.php
To get the Google Custom Search results visible too, we have to edit the search.php
This is even easier than the searchform.php edit, as you just have to take the Search Results Code from the Google AdSense for Search page, and insert it in the search.php where you see fit. I placed it on the top portion, over the WordPress post results, which start with: <?php while (have_posts()) : the_post(); ?>
If you don't care about the default WordPress Search results, and just want the Google Custom Search in, the most simple search.php (Search Results) page looks like this (ignoring the sidebar):
<?php get_header(); ?>
*GOOGLE SEARCH RESULTS CODE HERE*
<?php get_footer(); ?>
Tweaking the WordPress Search Some More
I have still some work to do on optimizing my search with php tweakin and plugins. Here's one link I'm going to look into and boost the search even more: Make WordPress' search function suck Less. @Yoast.com
Credits and Further Reading
I went through all these blogs and websites looking for the code and help and found some help, but not the solution I was looking for, s0 eventually I came up with the "onSubmit" solution for passing both q & s to the results page.
However, these blogs and websites have plenty of other relevant info, so feel free to dig in. Also if you want to use plugin for the search instead, or display the results in separate "search results" page instead of index.php and search.php, look for help and more detailed guides from these:
- How To: Building a Google Custom Search Engine (GCSE) into Your WordPress Blog @WordPress Hacks
- How to Set up Google Custom Search for Your Website and Make Money @Dosh Dosh
- Google Custom Search and WordPress Integration @Aleem Bawany
- How to Integrate Google Custom Search Engine Results into WordPress Blog Template @Thu Tu's Blog
- Integrate Google Search on your WordPress blog @Cats Who Code
- Integrate and Display Google AdSense for Search and Co-Op Custom Search Engine Results in WordPress Blog Page Template @My Digital Life
- Google Custom Search Plugin
Test Run Zemalf.com Search
If you want to see how the described combination of Google Custom Search and Default WordPress Search works, take a test run and search something using the search form on the top right corner.
