4 Easy Ways to Place Ad Banners on Your Blog

This tutorial will show you 4 painless ways to place an ad banner on your blog in the four most common areas: above the html, above the content area, above the content and above the sidebars. This tutorial is specific to the Thesis theme, but can be easily adapted to almost any Wordpress theme.

What you’ll need:

1) A banner ad from one of your sponsors like Amazon.com or something similar.
2) Access to your custom.css and custom_functions.php files for Thesis.

For the purposes of this tutorial, we’re going to make four test banners using the power of Thesis’ hooks. Feel free to delete or add as necessary to meet your needs. When you’re done, you’ll have banners in the following locations.

First off, add the following to your custom_functions.php:

<?php

// ADDS ALERT BAR ONE
function alert_bar_1() { ?>
<div class="alert_one">
// Above HTML
</div>
<?php
}
add_action('thesis_hook_before_html', 'alert_bar_1');

// ALERT BAR TWO
function alert_bar_2() { ?>
<div class="alert_two">
// Above Content and Sidebars
</div>
<?php
}
add_action('thesis_hook_before_content_box', 'alert_bar_2');

// ALERT BAR THREE
function alert_bar_3() { ?>
<div class="alert_three">
// Above Just Content
</div>
<?php
}
add_action('thesis_hook_before_content', 'alert_bar_3');

// ALERT BAR FOUR
function alert_bar_4() { ?>
<div class="alert_four">
// Above Just Sidebars
</div>
<?php
}
add_action('thesis_hook_before_sidebars', 'alert_bar_4');

Replace the “//Above Whatever” with the code for your banner(s).

Now lets add some color so that they pop. This won’t be necessary if your banner fills the entire area, but will serve as a good working demonstration.

In your custom.css file add the following:

/*---:[Alert Bar One]:---*/
.alert_one {
width: 99%;
color: #111;
background: #e3f0f2;
border-bottom: 0.4em solid #3d5a84;
padding-left: 2em;
font-size: 1.2em;
text-align: center;
}

/*---[Alert Bar Two]---*/
.alert_two {
background: #e3f0f2;
border: 4px solid #3d5a84;
font-size: 1.2em;
color: #111;
padding-left: 2em;
height: 2em;
text-align: center;
}

/*---[Alert Bar Three]---*/
.alert_three {
background: #e3f0f2;
border: 4px solid #2cac53;
font-size: 1.2em;
color: #000;
padding-left: 2em;
height: 4em;
text-align: center;
}

/*---[Alert Bar Four]---*/
.alert_four {
background: #e3f0f2;
border: 4px solid #b41404;
font-size: 1.2em;
color: #000;
padding-left: 2em;
height: 4em;
text-align: center;
}

That’s all there is to it! Told you it was painless. The only thing you’ll have to watch out for is making sure that your banners fit into the appropriate dimensions. This was Part II of the How To: Design Ads series. You can find Part I about how to add 4 125X125 ads to your side bar here. As always, please let me know how it goes in the comments or on twitter.

If you want to find me on Twitter, I'm {@4oclockproject}.