How to Add 125×125 Banner Ads to Your Sidebar

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

banner125.gifRight-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:

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:

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

125screen.gifAfter 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="125x125 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="125x125 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="125x125 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="125x125 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="125x125 banner ad" /></a>
</li>

Step 5 – Add a Bit of Style

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


/* -------------------[ 125x125 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.

Popularity: 81% [?]

There Are 35 Responses So Far. »

  1. One of our clients was just asking about this. If we could replace the 300×250 pixel banner with four 125×125 pixel banners. I was just going to send you an email, but decided to visit your website first. And then I find a complete tutorial. Thank you very much!

  2. Eureka! Literally, yesterday I was wondering how I could do this. Today I came to this site looking for instructions on glide modification and I was greeted with this post also!

    Michael, are you a mind-reader?

  3. Wow… the time couldn’t be better… Like Christian and Richard, I was just about to see how to do this… Talk about being ‘in tune’ with your client base!

    -Anthony

  4. Re my previous comment. Successfully modified the code to a size other than 125 square. See http://www.KahunaContent.com/site , bottom right corner.

    Thanks for pointing the way, Michael.

  5. Hi Michael,

    Thank you very much for the step by step instructions for the 125 x 125 Banner Ads. It worked perfectly the first time.

  6. I would purchase this theme in a heart-beat if I were you.
    It is powerful and the trick, I least I think is to not go crazy with ALL the features and instead save some of them for later versions of your site. It’s just nice to have the firepower this theme provides sitting around waiting to be used.

    Here is a great example of the theme in action: http://youredgeonline.com/

  7. Hey George,

    I’d recommend this template for sure. Easy to modify as long as you haven’t had too many beers. :-)

    And Michael’s response on questions is great.

  8. Thanks for posting this. When I was customizing the theme I had to improvise and create my own way to show ads. This template has been great so far and customizing it was quite easy although I had a few hiccups and had to have Michael reply to me personally but I was thankful for the support and quick responses.

    Here is how I put the theme to work: http://urbanbeautyonline.com

  9. Hi Michael, I would like to be able to display 125 x 125 banner ads vertically so they show up sitewide just as the sidebar banner ads do.

    Is there a way for me to display (4) vertical banner ads (that will display sitewide)in the middle content section of my blog?

    TIA

    David

  10. Followed instructions for 125×125 banner ads and ads are lined up on top of each other as opposed together in a square. Any way to correct this?

  11. Hi Charles,

    I first looked at the source code of your site and everything looks good there. From what I can tell, your style sheet is missing a bit of code at the end that specifies the location of each ad. Paste the following at the bottom of style.css and it should fix the issue:

    /* -------------------[ 125x125 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;
      }

  12. Another question, can I change static video in sidebar with unique video for each post?
    Thanks…

  13. Hi Lana,

    Yes, it is possible to have a unique video for each post. At the top of sidebar.php, change your video code as follows:

    <li>
           <?php if ( is_category('category-smµçVsÂr’’²óࢵ²b¢e×ÒÄ4RD„R4ôDRdõ"”õU"4DTtõ%’d”DTò„U$P¢Ã÷‡ÒVÇ6V–b‚—7µ²b¢e×Õö6FVv÷'’…Âv6FVv÷'’×6ÇVs%Âr’’²óà¢Ä4RD„R4ôDRdõ"”õU"õGµ²b¢e×Ô„U"4DTtõ%’d”DTò„U$P¢Ã÷‡ÒVÇ6V–b‚—5ö6FVv÷'’…Âv6FVv÷'’×6ÇVs5Âwµ²b¢e×Ò’’²óà¢Ä4RD„R4ôDRdõ"”õU"õD„U"4DTtõ%’d”DTò„U$P¢µ²b¢e×ÒÃ÷‡ÒVÇ6R²óà¢Ä4RD„R4ôDRdõ"”õU

    For more information on using these conditional statements, go to this URL:
    http://codex.wordpress.org/Conditional_Tags#A_Category_Page

  14. hey I know it is cheating, but I like the banner ad area for running a National Geographic feed, so I use a plugin called show125 from a French guy who goes by the name of X’or – find him here
    http://www.x-or.be/blog/
    not perfect but with some tweaking will work well
    hope this is of some help
    a

  15. Echoing a previous comment – “Followed instructions for 125×125 banner ads and ads are lined up on top of each other as opposed together in a square. Any way to correct this?”

    That’s exactly my question as well – otherwise, this works beautifully. I’d like to see two ads at top, two ads at bottom if possible…

    Same thing with this test: http://www.StacyN.com/squirenews

  16. FYI – I did use the style sheet recommedation you offered as a solution for Charles as well. Didn’t fix the stacking…

  17. StacyN,

    If the site you’re trying to get the ad block to look right is the “test” URL you provided, it’s probably because you’re not using the WP-Magazine theme, or even one from Solostream.

    Is there another site you’re trying to get this to work for? If so, post a comment with the URL and I’ll take a look. If not, you can try contacting the theme’s author for assistance.

  18. Hey Michael,

    I’m trying to install the Popularity plugin and I did the fix for it to work with higher version and I’m still getting the fatal error.

  19. Hi Alistair

    As you can see from my site in progress, I was able to get the 4×4 ads up, but they seem a bit off center and to the left, is there a way to center them?

    Thanks,

    Michael

  20. Hi everyone,

    If you are looking for support, please visit our forum at http://www.solostream.com/forum/ for immediate answers to your support questions. Otherwise, there will be a delay in answering your support-related comment if left here.

    If this doesn’t apply to you, feel free to comment!

    Alistair

  21. I have the previously mentioned issue with the blocks being vertical not a block. I have also modified the css as instructed. Any other help for this?

  22. [...] – mettre les mains dans le cambouis et trafiquer le code html de votre blog. Un très bon tutorial est disponible sur le blog wp-magazine. [...]

  23. Hi, I am facing the same problem as Michael G. Cohen, i have added CSS given above to rectify the vertical alignment appearing.

    But they seems to be left aligned and wants center aligned. Can you please help.

    Thanks
    Alex

  24. Great post. It really helped me to change the look of my site http://www.1-800-usimmigration.com

  25. I wil direct others to your post. Great Help. Thank you very much. I really appreciate your help in helping me to learn how to put ads in my blog.

  26. Thanks for the tip. This is exactly what I was looking for our blog.

  27. For all those with the vertical stacking issue their seems to be a bit of extra css on the solostream page that is dealing with this.

    They have

    #sidebar li ul.banner125 { margin-left:22px; }

    in the stylesheet as well as the code previously provided. Though why it isn’t in the template css I don’t know but I added it to my site and they adds are now centre aligned.

    Hope this helps.

  28. I’ll try..
    Hope it’s work..
    Thx.

  29. sorry, but the css doesn’t work..
    Did I make any mistake?
    I’ve followed yours.

  30. Thx u very much..
    Now it’s all working..

  31. Good site, admin.

  32. wow…nice post.suited wonderfully to my problem.haven’t try it though,but i bet i’ll work
    thx

  33. Thank you soo much! I was searching for this for weeks..Great instructions also

  34. Hi, is it possible to do this with the “LightWord 1.7 by Andrei Luca” THEME…

    or does this tutorial only apply to your Theme?

    If so can you please tell me how I can add these advertisements to my blog without having your theme.

    Thank You,

    Pete

  35. These are instructions for adding 125×125 ads into a sidebar. It should work for any sidebar you are working with. However, we have no way of knowing any of the specifics related to the theme your have referenced. Our suggestion is that you contact the theme designer directly to confirm.

Post a Response

Please do not post a comment for support here. We provide all support through our forum at www.solostream.com/forum. This is the best and fastest way for you to get the answers to your questions. Plus signup is free.