If you look at the sidebar of my blog you will see AdSense for Search replaced the standard WP search.

First, I am going to explain why to do it, then how to do it in the most professional way

Why?

There are five reasons why you should use AdSense for Search

Display results in the Google way. Almost all people are used to read Google results, making its way to display results the more effective and user friendly at the moment.

Use a real search engine. Google uses its secret formula to order results by relevancy, that works better than WP search that only lists posts ordered by data.

Extend the search to other sites. With WP search, you can only search within your blog. With Adsense, you can define a list of sites to search for the query.

This is very useful if you run multiple sites covering the same topic, like this blog, triqui.com and triquitips.com.

Monetize. Results page has sponsored ads that will help you to monetize the blog.

Feedback. You can look at the top queries and know what people are looking for in your blog. And improve it.

How?

In order to install AdSense for Search you will have to play a bit with WP and AdSense

WordPress – step 1

Log in your admin panel and create a new empty page called “Search Results” or something like it. Then go to the page and copy/paste its URL somewhere safe

AdSense

That’s very easy… just log in you Adsense account and click on AdSense Setup then AdSense for Search

On next page, select Only sites I select on Search Type, write down the urls (one per line) of the sites you want to search across on Selected sites, fill Optional Keywords field with space-separated keywords that matches your site content.

Then choose your site language, enconding, Google domain to be used for search results, create a channel to track performances and mark Use SafeSearch (onless you have a xxx blog)

Now it’ time to select the look and feel of the search box and its length

Finally, the most interesting part.

Select Open results within my own site and enter the URL of the results page you created before. Enter the width of results area according to the width of your main content div and for most templates select Top and Bottom as Ad location.

If you don’t know the width of your main content div, you can find it in your style.css file inside youw theme directory usually in this way:

1
2
3
4
5
6
7
8
9

#contentleft {
	/*background: #FFFFFF;*/
	display: inline;
	float: left;
	width: 530px;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 0px 10px;
	text-align:justify;
}

at line 5 I can find my main content div is 530.

Don’t worry if you can’t determine it: you can always change settings later until you have your search results fit in the page

Play with the palette if you want (but I recommend you to use the default one)

At this time name and save your search engine to get the code.

You will be given two codes, a Search Box Code that will look like this:

1
2
3
4
5
6
7
8
9
10

<form action="http://www.emanueleferonato.com/search-results/" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-2062493463858889:up0qwg-5an7" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="ISO-8859-1" />
    <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>

and a Search Result Code that will look like this

1
2
3
4
5
6
7
8
9

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

Copy and paste them somewhere safe

WordPress – step 2

Edit your results page and paste the Search Result Code.

Also don’t forget to save in a safe place the number of the post shown in the url , in my case 415.

Now it’s time to insert the Search Box code in an HTML widget or directly into the sidebar.php file in your theme directory.

In my case I added it at the very top of sidebar.php file in this way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- begin main_sidebar -->
 
<div id = "mid_side">
 
<form action="http://www.emanueleferonato.com/search-results/" id="cse-search-box">
  <div id = "cse">
    <input type="hidden" name="cx" value="partner-pub-2062493463858889:x253il-vejs" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="ISO-8859-1" />
    <input type="text" name="q" size="35" />
    <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>
 
 
<!-- begin l_sidebar -->
 
<div id="l_sidebar">
 
	<ul id="l_sidebarwidgeted">
	<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
... etcetera

if you look at lines 5 and 6 both the form and the div have an id, for a css finetuning of their look.

in my style.css file you can find

1
2
3

#cse-search-box{margin:0px}
 
#cse{padding:5px 0px 0px 5px}

WordPress – final touch

Now the only issue is that if you have a page listing, it will include your Search Results page too.

But in my case, it’s not on my header.

Why?

It’s just a matter of how do you call wp_list_pages function.

wp_list_pages() displays a list of WordPress Pages as links. It is often used to customize the Sidebar or Header, but may be used in other Templates as well.

Read the full documentation at Template Tags/wp list pages WP Codex.

You can exclude pages from the list just adding the exclude parameter with the number of the page to exclude.

How can you find that number? That’s the number you saved before from your page URL.

And that’s all… happy searching.