As you can see on Floogi, and other blogs, there is an ad right under the first post. The ad is placed there for a good reason, visibility. The area under your first post is one of the best places, on your blog, to place an ad.

Think about it, when your readers has finished reading your post, where does their eyes go? That’s right, their eyes will float naturally, straight to the ad. You don’t need to be a rocket scientist to realize that a good ad, placed under your first post, can do extremely well for you.

It’s rather easy to fix your theme, so that it displays an ad of your choice, under the first post. I haven’t heard of any WordPress plugin, that will do it for you, but I wouldn’t be surprised if such a plugin exists. Nevertheless, in this post I will show you how I edit my themes, to get the ad in place.

First, we must understand how WordPress and your theme, displays your posts. I will explain how this works, in a very simplified way. A WordPress theme is built up with CSS, PHP and HTML, to show your posts.

If you look at your theme’s main index file, index.php, you will see a lot of code that begins with <?php, which tells the server to execute some PHP command. The code that you want to look for, is the one shown below,

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

This is the beginning of a loop, which will go through your database, looking for posts, that will be displayed on your first page. The loop will continue, until the number of posts has been displayed, usually 10, which is the default.

Now, scroll down until you find this line,

<?php endwhile; ?>

This is the line, which starts the loop all over again, if the number of posts hasn’t been reached. The code between those two lines, is also called the loop, in the WordPress world.

It’s inside the loop, that we will find the code that actually displays, your posts,

<?php the_content(); ?>

So, it’s between that line and, <?php endwhile; ?>, we will add our ad placement code, since we want our ad to be shown under the first post. If we would place our code above the, <?php the_content(); ?>, our ad would be shown over our first post, instead.

The Ad Code

The code, that we will place inside the loop, look like this:

<?php $pCount=0; if ($count == 0) : ?>
<?php include(TEMPLATEPATH . '/ad.php'); ?>
<?php endif; $postCount++; ?>

Here is a brief description, on what the code does, again simplified.

The first line, does two things:
First the variable $pCount, is created, and a 0 is placed within it. Then the code test $postCount, to see if it contains 0, if it does, the second line will be executed.

The second line:
This line includes the contents, of a file named ad.php, which is placed inside the theme directory. Usually, this would be the path to the theme directory,
wp-content/themes/YOUR-THEME-NAME/

The third line:
Here the IF statement ends, and the value inside $postCount is increased by 1.

How It Works

If we place our ad code on the line above, <?php endwhile; ?>, here is what will happen.

The first time the loop is running, WordPress will check to see if there is any posts in the database that should be shown, if there is, the code, <?php the_content(); ?> will display that post, on your blog.

Our code would now be tested. Since it’s the first turn for the loop, we know that $pCount contains 0, so our ad will be displayed, right under the contents of the previous post. Which is the first post. Then we increase $pCount, with 1.

If there is more posts waiting to be displayed, the loop will do another turn and display the next post, when it comes to <?php the_content(); ?>.  Now, in the loop’s previous turn, we increased $postCount with 1, so it’s not equal to 0 and our ad will not be displayed, regardless how many turns the loop does.

The ad.php File

ad.php, will contain the ad code, which will be displayed. To create your ad.php, just fire up the text editor of your choice and enter the ad code, as is. Save it as ad.php and upload it to your themes directory, which should be wp-content/themes/YOUR-THEME-NAME/

The contents of your ad code, will first be inserted into your blog and then rendered as if it was there when the blog page loaded for the first time. For example, if you put this inside the ad.php,

<div style="text-align: center"><img src="PATH-TO-BANNER-banner.jpg" alt="Visit Sponsor" /></div>


The image banner.jpg would be centered, under your first post. If you use Adsense, you will just copy and paste the code, given to you by Adsense, inside your ad.php file.

Of course, if you know CSS and PHP, you can do much more, like place the ad code inside a container and add margins etc to it, to get even more control of how your ad is shown.

Code Placement

Since all themes are designed differently, I cannot give you the exact placement, where you should place the code, inside your theme’s index.php. However, if you place the code, on the line right above, <?php endwhile; ?>, you now that the post in whole, with all meta data and such, have been displayed. So, your ad will be displayed right beneath it.

Then, all you need to do is test it and see how it looks. Maybe you might want to place the code on the line, above the last </div>, before <?php endwhile; ?> and see how that looks, with your theme.

Here is a image from my theme’s index.php, with the key elements from this post highlighted,

The first highlight, shows where the loop starts.

The second highlight, shows the code that will display the contents of your posts.

The third highlight, shows where I have placed the ad code, right above the fourth highlight, which is the end of the loop.

Now, there is no guarantee that your theme’s index.php will look exactly like mine. However, it should contain the highlighted commands, while (have_posts()), the_content() and endwhile. So, you could use those commands as a guide, to where to place your own code.

At Last

Remember, before you do anything with your WordPress blog, do a backup! That way, if you mess things up, you can always use your backup and restore everything back to normal again. So do a backup, before you do anything else!

My goal with this post, was to show you, how to place an ad under your first post, in a way that would be easy to understand. Hopefully, I have made you curious on how WordPress works, so that you will start explore it’s vastly number of capabilities, on your own.