Many people like to display 125×125 banner ads in their sidebar. In this tutorial, I’ll show you how to add them to your own site.

Step 1 - Upload a Generic 125×125 Banner

Right-click the image to the right and save it to your desktop as banner125.gif. Then upload it to the /images folder within your WP-Mag theme folder. Alternatively, you can use your own generic 125×125 banner; just be sure to name it banner125.gif.

Step 2 - Upload the Banner Ads 125×125 Template

Right-click this link, and save the file to your desktop as banner125.php. Then upload the file to your theme folder with the rest of your theme files.

Step 3 - Place the Generic Banner Ads in Your Sidebar

In your Wordpress control panel, go to the Theme Editor. On the right side of the page, click the link named “Sidebar.” Once the Sidebar template is open in your Theme Editor, look for these lines of code:

<li>
  <?php include (TEMPLATEPATH . '/banner300.php'); ?>
</li>

If you want to remove the 300×250 banner ad and replace it with the 125×125 banner ads, simply change those lines to read:

<li>
  <?php include (TEMPLATEPATH . '/banner125.php'); ?>
</li>

If you want to keep the 300×250 ad, leave the code as it is and place these lines above or below it:

<li>
  <?php include (TEMPLATEPATH . '/banner125.php'); ?>
</li>

After you click the Update File button, you should have something that looks about like the image to the right (click image to enlarge).

Step 4 - Replace Your Generic Banners and Links With Real Ads

While still on the Theme Editor page, click the link for “Banner Ads 125×125.” The code looks like this:

<ul class="banner125 clearfix">
  <li class="ad1">
    <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner125.gif" style="display:block;margin:0;padding:0;" alt="125×125 banner ad" /></a>
  </li>
  <li class="ad2">
    <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner125.gif" style="display:block;margin:0;padding:0;" alt="125×125 banner ad" /></a>
  </li>
  <li class="ad3">
    <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner125.gif" style="display:block;margin:0;padding:0;" alt="125×125 banner ad" /></a>
  </li>
  <li class="ad4">
    <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner125.gif" style="display:block;margin:0;padding:0;" alt="125×125 banner ad" /></a>
  </li>
</ul>

All you need to do is upload your 125×125 banner image(s) to the /images folder, and change the code above to reflect that.

For example, if you upload a new banner called solostream-banner-125.gif, and you want to link that banner to www.solostream.com, you would simply change the code to this:

<li class="ad1">
  <a href="http://www.solostream.com"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/solostream-banner-125.gif" style="display:block;margin:0;padding:0;" alt="125×125 banner ad" /></a>
</li>

Step 5 - Add a Bit of Style

Add the following code to the bottom of your Stylesheet template:

/* -------------------[ 125×125 Banner Ads ]------------------- */
 
#sidebar li li.ad1 {
  float:left;
  margin: 0 5px 5px 0;
  width:125px;
  }
 
#sidebar li li.ad2 {
  float:left;
  margin: 0 0 5px 0;
  width:125px;
  }
 
#sidebar li li.ad3 {
  float:left;
  margin: 0 5px 0 0;
  width:125px;
  }
 
#sidebar li li.ad4 {
  float:left;
  margin: 0 0 0 0;
  width:125px;
  }


If you have any questions on this tutorial, just leave a comment, and I’ll respond as quickly as possible.