Tutorial: How To Add AdSense Block Above Your First Post

by derek on June 26, 2008 · 53 comments

Have you ever wanted to add an AdSense ad block above your first post? Or maybe you have been trying to figure out how to display an ad block before your first three posts?

That was the question that a reader recently asked:

I want to place a 468×60 banner on my blog, in between the content and the various tabs (Home, About, Contact). May I know which .php file i should paste the ad code to?

Since I have seen this question come up in a few other places as well, I thought it would be helpful to explain how you can do this on your own WordPress blog. You may see some slight differences on your own site depending on the theme that you are using but the general idea will be the same.

Quick and Dirty Method

The following steps are a little crude but will get the job done. After making this minor code change, you will have an AdSense block displayed above your first post.

Step One

The first thing to do is navigate to your Theme Editor (Design -> Theme Editor) and select the “Main Index Template (index.php)” page.

Step Two

In order to add an AdSense block directly above the very first post, you will want to find the line of code that opens the DIV block used to display each post. There will most likely be a “while” or “foreach” statement as well, it should look something like the following:

<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">

Step Three

Directly above these lines of code, you will want to insert your AdSense code. If you were to place your ad code after the “while” or “foreach” loop, you would end up displaying the ad block before every post on the page – which would exceed the maximum number of ad blocks permitted.

To make this step a little easier, I recommend using the AdSense Deluxe plugin to define the variety of AdSense blocks that you will be using. Then inserting the ad code would look something like this:

<?php adsense_deluxe_ads('468x60'); ?>

If you’re not using the plugin, you would simply insert the standard AdSense code block in the same location above the code located in Step Two.

Step Four

Save your file and launch the main page of your blog. You should now see an AdSense block directly above your first post.

Enjoy!

Just As Quick But Slightly Less Dirty Method

As I mentioned earlier, the above method is a little crude and does not allow for much flexibility as it only adds an ad block above the first post.

What about if you want to display an AdSense block before each of the first three posts? Or two posts?

The following method will add a little bit more flexibility as you will easily be able to change the number of AdSense blocks that are displayed by changing one small thing as opposed to adding/removing an entire section of code.

Step One

The first thing to do is navigate to your Theme Editor (Design -> Theme Editor) and select the “Main Index Template (index.php)” page.

Step Two

In the previous method, we looked for the DIV tag and placed the ad code outside of the DIV and the while / foreach loop. This time we will place the code inside the loop but add a little extra code to prevent the ad block from displaying too many times.

Find the code that looks similar to the following:

<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">

Step Three

Now we are going to add the AdSense block again, although this time we are also going to add some PHP code that will be used as a counter. The counter will display the ad block until it exceeds the number that we specify and then will no longer render the ad block.

This might sound daunting but it is pretty easy. Our code will look something like this when we are done:

<?php $counter 0?>
<?php 
while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<?php if($counter 3) { adsense_deluxe_ads('468x60'); } ?>
<?php $counter
++; ?>

The code above will display an ad block before the first three posts on the page. If you only want to show the ad before the first post, change the “3″ above to a “1″ and you are done. Later if you decide you want an ad block before the first two posts – no problem, just change the “1″ to a “2″ and you’re done.

Step Four

Save your file and launch the main page of your blog. You should now see an AdSense block directly above the first three – or whatever number you used – posts.

Enjoy!

Hopefully you were able to follow along with this brief tutorial on adding an AdSense block above your post and can now sit back and wait for the money to start rolling into your account – if only it were that easy.

Should you run into any problems or have any questions, please leave a comment below and I will do my best to help you out.


Stay In The Loop!

Subscribe to the Derek Semmler dot com feed via RSS or Email to receive notifications when new posts are published. Follow the WordPress ninja on Twitter too!

Previous post:

Next post: