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.

This tutorial will show you how to build a fully customizable block of 125X125 pixel ads that can be displayed in your Wordpress Sidebar. This tutorial is specific to the Thesis theme, but if you have even a beginner understanding of working with your theme’s files you can easily adapt it to almost every WP theme.

When you’re done, you’ll have sidebar ads that look something like this:

What you will need:

1. Four 125×125 px images/ads that will take the place of the above colored blocks.

2. Access to your custom_functions.php and custom.css files (for Thesis).

Copy and paste the following code into your custom_functions.php file making sure to replace the <img src=”http…> with your own 4 distinct image urls leading to your ads and 4 distinct urls leading to your desired ad pages.

function my_ads() { ?>

<div class="ad_block">
<ul>
<li>
<a rel="nofollow" href="http://www.yoursite.com">
<img src="http://www.yoursite.com/images/ad1.jpg"/>
</a>
</li>
<li>
<a rel="nofollow" href="http://http://www.yoursite.com">
<img src="http://www.yoursite.com/images/ad2.jpg"/>
</a>
</li>
<li>
<a rel="nofollow" href="http://http://www.yoursite.com">
<img src="http://www.yoursite.com/images/ad3.jpg"/>
</a>
</li>
<li>
<a rel="nofollow" href="http://http://www.yoursite.com">
<img src="http://www.yoursite.com/images/ad4.jpg"/>
</a>
</li>
</ul>
</div>
<?php
}
add_action('thesis_hook_after_sidebars', 'my_ads');

Now, in your custom.css file add the following:

.custom .ad_block {
float:left;
height:100%;
margin:5px 0 0;
padding:0 0 0 0;
width:315px;
}

.ad_block ul {
margin:0;
overflow:hidden;
padding:0;
}

.ad_block li {
background:#FFFFFF none repeat scroll 0 0;
display:block;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:10px 5px 0;
overflow:hidden;
padding:8px 9px;
width:125px;
}

Save and refresh your page and you should have ads beneath your sidebars. To move the ad block around just change the hook from ‘thesis_hook_after_sidebars’ to whatever you’d like.

That’s it! If you need help making it work or styling it let me know in the comments. Also, if you’d like a different ad arrangement please contact me and I’ll be glad to work with you to make it happen.

Check back soon for more in the How To: Design Ads series.