How to Make a Block of 125X125 Ads on Your Blog

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.

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