Add AdSense to a WordPress Blog, Updated for WordPress 2.8

Updated March 2009 for adding Google AdSense to WordPress 2.8 themes. Works with WordPress 2.7 and WordPress 2.7.1.

As you can see I use the AdSense program on this the Make Money Online Guide. This post will explain how other WordPress 2.8 users can achieve a similar use of AdSense on their WordPress blogs.

If you are feeling lazy check out the WordPress 2.8 Themes on this site, you’ll find WordPress 2.8 themes with AdSense already added and SEO optimized code (better search engine rankings as well as money from AdSense).

Popular WordPress themes like Blix, Talian, Almost Spring and many more all with AdSense added and SEO optimization and updated to work in WordPress 2.8.

The WordPress Themes with AdSense/SEO at Google AdSense Themes include a file designed for novice WordPress users to set options like ad colour, ad unit sizes, channels, border corners etc… though if your a complete technophobe (like my wife) adding your google_ad_client (the pub-number) is all that’s needed (if you can copy and paste one small line of text you can setup my themes) to have your site have the same level of SEO/AdSense ads you see on my sites like these-

Adventure Travel Vacations : uses Talian WordPress Theme (very popular theme).

The Big Feature : youngest sons site, uses Web 2 WordPress Theme.

Conspiracy Theories and Hoaxes : uses Almost Spring

Adding AdSense to your WordPress Template

WordPress has a quite easy to use template system, trust me I’ve tried many popular blog CMS’s and WordPress is by far the easiest to use.

There’s two ways to edit a template, via the built in template editor or in a HTML editor. I use a HTML editor (just a basic text editor not unlike Notepad) for major template work and the built in editor for small changes. I prefer using a offline text editor since you can easily backup your work as you go along, not as easy with the online theme editor.

I’ll only deal with the WordPress built in editor for this post since explaining FTP etc… is too much for one post.

So log in to your WordPress blogs Dashboard and on the left menu click the Appearance link, followed by the Editor link which will appear below.

You should see a page like this in WordPress 2.8

You can see from WordPress post pages like AdSense Revenue there are multiple Google AdSense Ads on the page. You should be aware at this point you can only use three ad blocks per page (you might find Make the most of your ad units helpful). This makes adding the AdSense code a little trickier than if you could add unlimited ad blocks, but with a little thought it’s possible.

So three AdSense for content ad blocks is what we are aiming for, to achieve this I added one Wide Skyscraper (160 x 600) ad block to the side menu, one Square (250 x 250) ad block and one Banner (468 x 60) ad block to the content to WordPress posts.

Adding AdSense Ads to the Menu (non widget)

If you use widgets skip to the next section. If you don’t use widgets I strongly advise learning about them, you can build your menus exactly how you want them without having to edit the template files.

Using the WordPress Theme Editor open the file Sidebar (sidebar.php). The actual code will vary depending upon which template you are using, this is for the WordPress theme Almost Spring, but will be relevant for most themes.

You will see code like this-

<div id="sidebar">

<ul> <?php wp_list_pages('title_li=<h2>' . __('Pages') . '' ); ?> <li> <h2></h2><h2>< ?php _e('Archives'); ?></h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul>

The simplest way to add your AdSense block is to insert it near the top-

<div id="sidebar">


<script type="text/javascript"><!--

google_ad_client = "pub-8325072546567078";

google_ad_width = 160;

google_ad_height = 600;

google_ad_format = "160x600_as";

google_ad_type = "text_image";

google_ad_channel ="";

google_color_border = "E8E7D0";

google_color_bg = "FFFFFF";

google_color_link = "B96F17";

google_color_url = "B96F17";

google_color_text = "000000";

//--></script>

<script type="text/javascript"

  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

<ul> < ?php wp_list_pages('title_li=<h2>' . __('Pages') . '' ); ?> <li> </h2></h2><h2>< ?php _e('Archives'); ?></h2> <ul> < ?php wp_get_archives('type=monthly'); ?> </ul>

Note: You’ll need to replace my google_ad_client with your code otherwise I’ll be paid for all your AdSense clicks!

This would put the AdSense ad right at the top of the menu. You can see from this blog it’s possible to put the ad block lower on the menu, I have it between Categories and Archives. So feel free to experiment with it’s placement.

You may find wrapping the AdSense code in a div helpful since you can then add padding etc…-

You can then edit the div’s style to match your sites positioning by adding more or less padding, the above code gives 5 pixel of padding around the entire AdSense block, padding is very useful when your Ad block doesn’t quite line in with the rest of the menu (try 10 for all values to see what it looks like).

When complete click the Update File button within the Theme Editor and all your pages will now have a Wide Skyscraper (160×600) AdSense ad on the side menu.

If you find the file won’t save (if you see the message “If this file were writable you could edit it.” where the Update File button should be) you will have to change the files write permission (needs to be 666). To do this access your site via FTP and navigate to /wp-content/themes/YOUR-THEME/ now select all files in the directory and change permission to 666 (it will probably be 644). You can find more info about this at WordPress support forums.

Adding AdSense Ads to the Menu Via a Widget)

I have to admit since I only use my own AdSense themes I’ve always built the sort of AdSense widget I’m about to describe below directly into the themes code via the functions.php file which is a completely different process. So this is the first time I’ve made a AdSense widget like this (learn something new everyday :))

Log into your WordPress Dashboard, click “Appearance” on the left menu followed by “Widgets”.

On the Widgets page you’ll see a list of widgets, near the bottom is one called “Text” with an “Add” link to the side of it and the description “Arbitrary text or HTML”.

Click the “Add” link.

On the right side of the page a new Widget called Text will appear.

You are supposed to click the “edit” link to the side of this, but on my theme (which has custom widgets) I had to click the “Save Changes” button first before being able to edit the text widget. So if you have problems, save changes as you go along.

Click the “Edit” link next to the Text widget.

In the new form that opens paste the following:

In the single line box name the widget something like “Adverts” : note this will be used as the menu heading, you see this on your blog, if you just want the AdSense ad unit with no menu heading leave this box blank.

In the large second box add

Don’t forget to change the google_ad_client = “pub-8325072546567078″; to use your pub code.

You might need to play around with the padding numbers, currently all set at 5px, if you find you need more padding on the left change padding-left:5px; to padding-left:10px; and see how it looks….

Should look something like this-

I originally called the widget “AdSense Widget” until realising this was used as the menu heading on the blog!

Click the “Done” button followed by the “Save Changes” button and your new AdSense widget will be live. If you aren’t familiar with widgets and this is your 1st use of widgets you’ll only have the AdSense ad unit on your sidebar menu.

On the widgets page click the “Add” links next to the menu widgets you want to show on your blog. Just add them one at a time until you have the menu you desire then click the “Save Changes” button and the new menu will go live.

And that’s how you add AdSense to your menu using a widget.

Adding AdSense Ads Within the Content of Posts

Now we come to the tricky part, we want individual post pages (like this one) to have an AdSense ad within the content (will result in more clicks = more revenue), but we can’t have 10 AdSense ads on every archive and similar pages.

Fortunately WordPress templates have a file called Single Post (single.php) load it into the theme editor and you should see something like this-

<div class="postentry"> <?php the_content(__('Read the rest of this entry »')); ?> <?php wp_link_pages(); ?> </div>

Add the AdSense code for a Square (250 x 250) ad block as follows (note the div with the float right styling, this is important).

<div class="postentry">


<div style="float:right; padding-left:5px;">

<script type="text/javascript"><!--

google_ad_client = "pub-8325072546567078";

google_ad_width = 250;

google_ad_height = 250;

google_ad_format = "250x250_as";

google_ad_type = "text_image";

google_ad_channel ="";

google_color_border = "E8E7D0";

google_color_bg = "FFFFFF";

google_color_link = "B96F17";

google_color_url = "B96F17";

google_color_text = "000000";

//--></script>

<script type="text/javascript"

  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

</div>

<?php the_content(__('Read the rest of this entry »')); ?> <?php wp_link_pages(); ?> </div>

When the file is updated all your WordPress single post pages will have a square AdSense ad floating to the right of the posts content, but the same posts on archive and similar pages will have no ad block. This ad will most likely generate most income because it’s in a hot click area (see AdSense Heat Map).

That leaves the third and final AdSense ad block which I’ve added just above the comment area of the blog page. To add this we again edit Single Post (single.php) using the WordPress built in theme editor.

<div class="postentry"> <?php the_content(__('Read the rest of this entry »')); ?> <?php wp_link_pages(); ?> </div>

<p class="postfeedback">

Add the AdSense code for a Banner (468 x 60) ad block as follows.

<div class="postentry"> <?php the_content(__('Read the rest of this entry »')); ?> <?php wp_link_pages(); ?> </div>


<script type="text/javascript"><!--

google_ad_client = "pub-8325072546567078";

google_ad_width = 468;

google_ad_height = 60;

google_ad_format = "468x60_as";

google_ad_type = "text_image";

google_ad_channel ="";

google_color_border = "E8E7D0";

google_color_bg = "FFFFFF";

google_color_link = "B96F17";

google_color_url = "B96F17";

google_color_text = "000000";

//--></script>

<script type="text/javascript"

  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

<p class="postfeedback">

With the WordPress theme I use (Almost Spring) this ad block just fits. If you find there isn’t enough room try a smaller width ad. You might have to add a div with center text align to make it look right.

This last ad block will probably be low click thru because of it’s location.

And there you have it three Google AdSense ad blocks added to a WordPress blog. If you use my technique and want to say thanks link to this page (or the home page) from your blog. Also feel free to add a comment below, love to see others using my ideas.