PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

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

Posted by on 10th May 2007 | 38 comments

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


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 .

38 comments - Leave a reply
  • Posted by TnN on 10th May 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.

  • Posted by Techie Buzz on 10th May 2007

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

  • Posted by Kevin on 10th May 2007

    thank you TB :)

    if your having trouble with it let me know.

  • Posted by Brian Heys on 10th May 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.

  • Posted by richard on 10th May 2007

    very clear and informative

  • Posted by Best CD Rates on 10th May 2007

    Great post! Really helped me out.

  • Posted by Dension Ice Plus on 11th May 2007

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

  • Posted by James on 11th May 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!

  • Posted by Christoph on 11th May 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.

  • Posted by Kevin on 11th May 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 :)

  • Posted by tash on 11th May 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!

  • Posted by Monetize Your Blog on 11th May 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.

  • Posted by Liza on 12th May 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.

  • Posted by Ellen on 12th May 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.

  • Posted by Stephen Welton on 13th May 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.

  • Posted by Kevin on 13th May 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 :)

  • Posted by Jason on 20th May 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

  • Posted by JohnPlace on 9th Jul 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?

  • Posted by JohnPlace on 9th Jul 2007

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

  • Posted by Kevin on 9th Jul 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 :)

  • Posted by Mark L. (Private Lab on 4th Feb 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).

  • Posted by Kevin on 12th Mar 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

  • Posted by John on 18th Mar 2008

    This worked perfectly, thank you sooooo much!

  • Posted by Niklas Kunkel on 18th Mar 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.

  • Posted by Kevin on 22nd Mar 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 :)

  • Posted by James A. on 26th May 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

  • Posted by lordcajen on 22nd Jun 2008

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

  • Posted by robert on 9th Jul 2008

    Thanks for the post, really helpful..

  • Posted by RB! on 10th Jul 2008

    Great article. Bookmarking this:cool:

  • Posted by vitiligo on 31st Aug 2008

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

  • Posted by Google Adsense on 7th Sep 2008

    Wow..

    Thx for your info..

    Nice job..

  • Posted by Dental Health Site on 21st Sep 2008

    Thanks a lot!

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

  • Posted by SamB on 23rd Sep 2008

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

  • Posted by @robertjao1 on 20th Sep 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?

  • Posted by Dentist In Astoria on 25th Nov 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

  • Posted by One Name on 2nd Dec 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!

  • Posted by louco73 on 10th Feb 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