How to integrate google adsense with your WordPress Blog without using plugins

Whether adsense is the best way to make money from a blog or not is up for debate however few people would argue that its the most common advertising media on blogs. There are numerous ways to integrate adsense into your blog. I was helping Stephen Welton integrate adsense into his new blog and it dawned on me that this is something a lot of people might have trouble with.

Most wordpress bloggers use a plugin to do the trick. I personally tried a few and found that they didn’t do what I wanted them to so I simply added the code to the templates. Don’t be alarmed – integrating adsense into your wordpress blog is very straight forward.

If however you would prefer to use a plugin to add adsense into your blog I strongly recommend reading the ‘10 Best WordPress Plugins for Google Adsense‘ which was posted last November at Quick Online Tips.

Before we proceed I need to remind you all that the maximum amount of adsense ads you are allowed on the one page is 3 ad units and one link unit. Bear this in mind when you are deciding where you want to place your google adsense ads. You can try and fool google all you want and place 5 ad units on the page but after the 3rd google ad no more will be listed :)

Where can you place your Google Adsense Ads

Every wordpress blog is different in design but essentially you can break any blog into 4 main areas :

  • The Header
  • The Sidebar(s)
  • The Footer
  • The Main Content Area

The main thing to note about the above is that generally speaking, the information in the header, sidebar(s) and footer are the exact same on every page on your blog. The main content area is different for every page on your blog ie. the main content area includes your posts, your archives, your pages, your categories and of course your home page.

Adding a google adsense ad unit to the header, sidebar(s) or footer is incredibly easy. All you need to do is open up the template you want in the theme editor and paste the code in there. Easy peasy! :)

I will assume that you know how to add the code to the first 3 areas. It’s the last area I want to talk about specifically in this article.

On Blogging Tips I have added adsense ads to two areas and its these areas I am going to use as examples of how to add adsense to your blog :

  • Home Page – On my home page I have chosen to display 7 posts before the reader needs to move to the next page. I have therefore edited my index.php file to add google adsense after the 1st, 3rd and 5th posts. Again, 3 times is the most I can display google ads on a page and since I dont have any on the header, sidebars or footer, this is OK.
  • Post Page – This is one of the most common places to place adsense. You need to edit your single.php file to place adsense here (sometimes this is called single post in your theme editor).

How to place integrate google adsense ad with your blog posts

This is my favourite place to add the adsense ads as its where all the content is!

As you can see from this page, I have added the google ads to the right hand side of the post and the content wraps around it. As I said before, this is a very common place to add your adsense ads – check out the latest posts from ProBlogger and John Chow to see how well it works. I’m not 100% certain that they have not used a plugin to achieve that but I assume they have used a similar method as me ie. they have used CSS (Cascading Style Sheets).

You need to use CSS to float the advert to the right hand side of the post. If you were to just place the google adsense code without the use of CSS the ad would display and then the content would display directly after it like this :


Without using CSS

As you can see from the above image, if we don’t use CSS with the code the adverts are just displayed on top of the content. Not every pretty is it. I am now going to show how the ads look when we float the advert using CSS :


With CSS

The CSS Code

This is the code you need to add to your stylesheet file in the theme editor

.adsense-right {
display:block;
float:right;
margin: 0px 0px 5px 10px;
}

It doesn’t matter where you add it in the stylesheet but if you’re not sure I recommend sticking it at the very bottom :)

If you are familiar with CSS you will realise that I have used a class instead of an ID. Since this is the only google adsense ad im aligning to the right on the page I could use an ID but it doesn’t matter what you use and keeping it as a class allows me to easily align ads to the right hand side in the future without changing anything. For more info check ‘The difference between an id and a class in CSS‘.

I will assume that a lot of you out there dont use CSS so I will break the code down to make you understand what we are doing here :

  • adsense-right – This is simply the name of our CSS class that we will be referring to later. As long as you link to the right name it doesn’t matter what you call it. You could call or crazygorilla if you were so inclinded. adsense-right is suitable since its self explanatory. However, as I said, you can call it anything you want.
  • display:block – All this does is ensure the ad is displayed in a block like format.
  • float:right; – This floats our advert to the right hand side and allows the content to flow around it (note you could also add a position:relative; tag to the css code if it doesn’t render properly in older browsers).
  • margin – Thje margin defines the space around our ad before the rest of the content. I have chosen to put no margin at the top and right hand side because there is already white space there. At the bottom I have a 10 pixel margin and a 5 pixel margin at the left hand side of the pad. If you want to understand this more please read Margins & Padding.

Hopefully you should now understand what the css code will do to our adsense ad. Its not just a matter of adding our code to the single.php template.

Editing the Single.php file

The single.php file controls what happens on the page with your full post. I assume you want to add the code to the same area I have in this page and to do that you need to add the code directly above the content of the post so you need to look for the function the_content.

In the default theme of wordpress this code looks like :

<?php the_content('<p class="serif">Read the rest of this entry </p>'); ?>

However, some themes display the content a little differently. For example in my theme I use :

<?php the_content("Continue Reading : " . the_title('','',false), 0). ""; ?>

Regardless of how its displayed, the function will have ‘the_content’ at the start of the php code.

Ok, you should now have found the line I was referring to. All you need to do is add the following code directly above that line :

<div class="adsense-right">
<!-- Add your adsense code below this line -->

Your adsense javascript code goes here

<!-- Add your adsense code above this line -->
</div>

Hey Presto – your adsense ad will now be wrapped around the right hand side of your blog posts. I use 120×240 pixel ads but you can use any size that fits well with your design.

Adding google adsense above the comments

I actually display two google ads on my blog posts. The other google ad is underneath the main article and directly before the comments (I use a 468×60). To do the same you need to add your adsense above the call to your comments template
ie. <?php comments_template(); // Get wp-comments.php template ?>.

So this area would look something like this :

<div align="center">
<!-- Add your adsense code below this line -->

Your adsense javascript code goes here

<!-- Add your adsense code above this line -->
</div>
<?php comments_template(); // Get wp-comments.php template ?>

Thats it. You should now be able to add adsense banners in the exact same places I have them on this page :)

How to integrate google adsense ad on your blogs home page

There are a number of ways you can integrate Google Adsense onto your home page. For a start you could just place a banner at the top and bottom of the page. However, you want better click thru rates and for that you need to integrage the ads better with your content.

You can apply the same technique that you used on your single.php template on the home page. The only limitation to this is that adsense will be displayed in the first 3 ads and the rest will not have ads aligned to the top right. This isn’t actually too bad of a way to do it though as the posts nearer the top will be read more than the posts at the bottom.

Check out Chris Stark’s site Fuzzy Future for the perfect example of this. If you view the page source you will see that Chris has embedded the content directly above the main content of each post with a CSS class called adsense-embed. This is the same technique which I explained above. The result is a google adsense banner aligned to the right hand side of the first 3 posts on the home page and the rest of the posts do not have ads. If you go back to his source you will notice that the posts without adsense banners still have a reference to the class adsense-embed but no google ad is added. This is simply because google stops will not let you post more than 3 ad units.

As I said before, I have did it a little differently but this method might suit a lot of you out there. All you need to do is apply the same modifications you did to your single post template.

Integrating Google Ads randomly on your home page

As I mentioned nearer the start of the article, on the home page of Blogging Tips I place google adsense after the 1st, 3rd and 5th posts.

I would love to take full credit for doing this but unfortunately I cannot – I used the fantastic adding adsense guide at tamba2.

However, I thought it would be good to show you the code I used on my index.php page. Have a good read of adding adsense – you should be able to follow it quite easily. If your struggling though, come back to this part and see the code that I have added – it might help to clarify things for you.

The code I added :

In my index.php page first I added the number count and the posts I want the displayed after. I added the code :

<!-- counter to add advertisements on index.php page -->
<?php
$postnum = 1;
$showadsense1 = 1;
$showadsense2 = 3;
$showadsense3 = 5;
?>
<!-- counter to add advertisements on index.php page -->

directly above the line

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

and then further down the page I display the google ad by adding :

<!--   //////////// add advertisements on index.php page -->
<?php if ($postnum == $showadsense1 || $postnum == $showadsense2 || $postnum == $showadsense3) { ?>
<p><center>
<!-- Add your adsense code below this line -->

Your adsense javascript code goes here

<!-- Add your adsense code above this line -->
</center></p>

<?php }
$postnum++; ?>
<!--   //////////// add advertisements on index.php page -->

directly above

</div> <!-- End of Post -->

Again, complete details of how to do this can be found here. If your struggling to understand it please leave a comment or start a thread in the forums and ill do my best to help.

Summary

By integrating ads better with the content on your blog you should hopefully see an incease in commissions from adsense (but dont hunt for me with a big stick if it doesn’t increase!!). If you are not too confident messing about with templates I would recommend checking out the ‘10 Best WordPress Plugins for Google Adsense‘ listed at Quick Online Tips as you might find what you need there.

I hope this guide was easy to follow but if your still struggling let me know and ill clarify what I meant and do my best to help you get it working on your blog.

Good luck,
Kevin

About the Author

Kevin Muldoon is a professional blogger with a love of travel. He writes regularly about topics such as WordPress, Blogging, Productivity and Social Media on his personal blog and provides support to bloggers at Rise Forums. He can also be found on Twitter @KevinMuldoon and .

TnN - May 10, 2007

Now, how to get eyeballs to your site and work those ads. Email me for a private invitation token. Then you can erase this post.

Keith Dsouza - May 10, 2007

This has been a very informative post. I want to try with the positioning you suggested for the adsense inside the content.

Kevin - May 10, 2007

thank you TB :)

if your having trouble with it let me know.

Brian Heys - May 10, 2007

Good post Kevin.

I have quite a few years of web development experience under my belt, so I personally prefer to implement AdSense into my site by writing my own plugin that allows me to easily switch ad formats without hacking around too much code.

It's still deactivated at the moment though. Every now and then I activate it briefly to test something out, but I mean briefly!

I want to try to build a good visitor base first, rather than risk losing people to an AdSense ad at this stage.

richard - May 10, 2007

very clear and informative

Best CD Rates - May 10, 2007

Great post! Really helped me out.

Dension Ice Plus - May 11, 2007

Quite a lengthy post, but some good advice there for anyone without too much programming experience.

James - May 11, 2007

Very handy tips written in an easy to understand manner for newbies like me. Already implemented the floating CSS, which I was trying to figure out on my own. Cheers!

Christoph - May 11, 2007

That is a great posting. I am using the plugin so far, but I think I will switch – especially after seeing your "single page" implementation guide. Thanks.

Kevin - May 11, 2007

glad you liked the guide guys. ive got some more wordpress guides coming in the next few weeks. if theres anything you want covered please let me know :)

tash - May 11, 2007

Not bad. I bookmarked this for when I redesign my site/blog. Finally getting enough traffic for ads to actually be worth something ;)

Thanks!

Monetize Your Blog - May 11, 2007

Placement is so important. I'm trying to find the perfect mix between optimal CTR and reader satisifaction. I know I could generate 6% or more, but the ads would obstruct my content and do more harm than good.

So far CTR is higher, but earnings are relatively the same unfortunately.

Liza - May 12, 2007

Thanks for the post, really helpful. I found your blog through John Chow's review, published a few days ago and really enjoyed reading most of your tips. I have a blog myself in which I am trying to give as many tips as possible to the readers about revenue and Adsense, but it's always good to learn from others as well and see their view points and tricks.

Ellen - May 12, 2007

Thanks so much for an informative post. I used the code you supplied and followed your directions and everything works! I'm not proficient in CSS or php so your post was very helpful. Now, if I could make a little money.

Stephen Welton - May 13, 2007

Kevin glad to see you pieced together everything. I have been extremely impressed with Kevin and his mentorship over the last little while and have to let you all know that I have been able to follow along with no experience.

You know you are on the right path when you teach people with no experience how to implement the technical steps to become successful online.

I expect to post more about Kevin and his help as we continue to learn daily.

Should be alot of fun.

Kevin - May 13, 2007

thanks stephen – you should give yourself a pat on the back because i only wrote about it cos i noticed how keen you were on implenting it.

Perhaps ill use you as a guinea pig in future – if you ask me how to do something like that again i can write a guide about it. Sounds silly but sometimes its difficult to realise what new bloggers have difficulty with and what they dont :)

Jason - May 20, 2007

Thank you for the tutorial, I can't say how much of a help it was. I did get it to work without issue.

I was wondering if you had some easy suggestions on how I can move the adsense blocks to other areas of the blog.

1. Currently you have a horizontal block just above the comments on the individual post. Rather then having it here, how would I move it to the top of the post so that it is just below the title of the blog post?

2. On the index.php page, you have a horizontal block at the end of the post. How can you have the adsense block to the left of the post and have the blog post wrap around it. I know you have the code for the individual post, and I take it that it would be similar for the index.php, but just not sure where to put the code.

Thank you

JohnPlace - July 9, 2007

I'm trying to add a second advertisement in a DIV that's floated right at the BOTTOM of my posts — I already have one floated left at the top.

The problem is that I can't seem to make this work, since when I modify the single_post template, the ad ends up below my post instead of alongside it.

This has something to do with this line of code, from the template, which I think i'd have to hack to make this work:

Read the rest of this entry »'); ?>

Any ideas?

JohnPlace - July 9, 2007

As a quick follow up, for some reason, the line of code I tried to include got chopped off.

Kevin - July 9, 2007

Jason – Sorry for the incredible delay in replying to your comment. I haven't checked this page for some time. It would be incredibly easy to place adsense under the title of a blog post. You wouldn't need to add any special code either (other than the adsense code)

The same principle can be applied to float the advertisement left. Its fairly easy. If you are still having problems, please create a thread in the blogging tips forums and i'll do my best to help. :)

John – If you post this code in the forums with a link a page on your blog for reference, I'll have a look at it and see if I can help in some way :)

Mark L. (Private Lab - February 4, 2008

With such helpful posts as yours, it's no wonder WordPress continues to be the leading blogging host/software. I'm sure WordPress users are thankful for such great info (and the WordPress developers, too).

Kevin - March 12, 2008

Niklas – your site is not live. Can you fix whats wrong with it and then reply and I'll do my best to help :)

kevin

John - March 18, 2008

This worked perfectly, thank you sooooo much!

Niklas Kunkel - March 18, 2008

Hey Kevin the site I mentioned as an example of the adsense thing I meant is finally back up after switching hosting providers.

here’s the url again novaksblog.com

Just click on any of the articles and you’ll see on the left hand-side there is alway an ad-sense ad there that is integrated into the single page only (where the full article is shown) and it shoves the text out of the way.

Kevin - March 22, 2008

Niklas, that blog is using the technique described in this article. If you are still having problems drop me an email and I'll do my best to sort this out for you :)

James A. - May 26, 2008

Hi Kevin,

FIrst I would like to say thank you. I am brand new to this stuff and just turned 51, was into the net about 10 years ago but due to costs back then was forced to give it up. So much new stuff to deal with today!! But you have explained it and made it easy to understand. I was getting confused as to just how to get a picture on a blog. Still a little fuzzy and will bookmark your page to come back to, but again thank you and hope mine will look this good in coming days..

James A
http://www.professorofprofit.com/blog1

lordcajen - June 22, 2008

excellent post. i hope to monetize my blog too. thanks!

robert - July 9, 2008

Thanks for the post, really helpful..

RB! - July 10, 2008

Great article. Bookmarking this:cool:

vitiligo - August 31, 2008

This is realy fine tips. You are really very experts person. Thanks

Google Adsense - September 7, 2008

Wow..

Thx for your info..

Nice job..

Dental Health Site - September 21, 2008

Thanks a lot!

It even works for bidvertiser ads… Now, i have them placed on my site…..where exactly i want them

SamB - September 23, 2008

Thank you, This is good post for me :D.

@robertjao1 - September 20, 2010

Currently you have a horizontal block just above the comments on the individual post. Rather then having it here, how would I move it to the top of the post so that it is just below the title of the blog post?

Dentist In Astoria - November 25, 2010

Hi Kevin.
How are you ? I hope your doing well.

I found your post very nice, neat and helpful but i have a little note if you are using a wordpress script in the example above why don't you just use an ad inserting plugin? It's a lot easier .. you know.

Thanks again for this helpful post.
My recent post Secrets That Teeth Whitening Products Companies Don’t Want You To Know

One Name - December 2, 2010

@ Dentist In Astoria

With all the Green products MANIA which runs in the world today, I'm shocked you're still interested in plugins. Plugins are RED, NOT GREEN. Plugins EAT server resources like crazy and it's better to limit the number of plugins or your SHARED HOST might kick your site down. I'm not kidding!

louco73 - February 10, 2011

Thanks so much! I have been reading up on the best way to do this and decided to go with no plug-in, so your code sample helped a lot. I changed it a bit for my needs and it's working nicely.
My recent post NAS Server – 2007

Comments are closed