How (and why) to include AdSense for Search in your WP blog

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (12 votes, average: 4.17 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» WordPress themes are designs for WordPress - one of the most popular blogging software nowadays.
You will be pleasantly surprised by WordPress Themes provided by Template Monster. All of them are of professional design and high quality.

14 Responses

  1. Thomas says:
    August 15, 2008 at 3:36 pm

    nice… giving you a few 0.0001 cents by clicking ads…

    Reply
  2. FrozenHaddock says:
    August 15, 2008 at 4:37 pm

    Haha, just did this last week, it seems to have helped :)

    Reply
  3. Android Freeware says:
    August 16, 2008 at 4:43 am

    will try this soon

    Reply
  4. Flo says:
    August 20, 2008 at 5:59 pm

    Thank you for the detailed instructions. I had no problems creating the search results with wordpress.

    Reply
  5. Reverend Mortis says:
    August 26, 2008 at 9:00 pm

    My Search Box code comes out of Google looking a lot different than yours (and causes a huge error when I cut/paste it into my left sidebar). Otherwise, everything else went exactly as you showed. Any help would be greatly appreciated as I cannot seem to figure out what I’m doing wrong.

    This is what I get;

    @import url(http://www.google.com/cse/api/branding.css);

    Custom Search

    Reply
  6. Saijo George says:
    September 10, 2008 at 1:26 pm

    Great tip, thanks for sharing it with us. But I see a problem with this for people using Adsense on the sidebar. According to googles terms I think its not allowd for the search page to have any other adsense ad other than a txt unit.

    If anyone know a way to get rid of Adsense banner from the sidebar on the search pages , plz add em here

    Reply
  7. Saijo George says:
    September 11, 2008 at 2:45 am

    Figured out how to do it :) , it can be done using is_page() more info : http://codex.wordpress.org/Conditional_Tags#A_PAGE_Page

    Reply
  8. MichaelJWilliams says:
    September 12, 2008 at 2:09 am

    Thank you for this, Emanuele, it’s really useful!

    Reply
  9. Introduction to Michael James Williams's Blog | Michael James Williams says:
    September 12, 2008 at 6:44 pm

    [...] customised WordPress with the Journalist theme (thanks, Lucian E. Marin), a bunch of plugins, and some tips from Emanuele Feronato (thanks, [...]

    Reply
  10. 2key says:
    January 15, 2009 at 5:43 pm

    This does not seam to work on wordpress 2.7. The main difference i noticed is that the page url is something like yourdomain/?page_id=769 could this be the reason?

    Reply
  11. Maria says:
    August 25, 2009 at 9:40 am

    i am just starting out with Google Adsense. i am hoping that i would earn a good deal of money on this program.

    Reply
  12. acnecare says:
    September 25, 2009 at 6:00 pm

    i am a beginner in monetizing my blog with Adsense. i still need to learn more about the tips and tricks on Adsense. hopefully i might be able to earn a decent amount of cash on Adsense.

    Reply
  13. Joint88 says:
    October 13, 2009 at 4:40 pm

    Adsense is my main source of income when making money online. nothing beats adsense when it comes to making money online.

    Reply
  14. Jasmine Turner says:
    July 10, 2010 at 8:17 am

    you can easily earn lots of dollars from adsense if you have a high traffic site..*”

    Reply

Leave a Reply