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
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:
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:
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="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% [?]
Amazing tip, thanks for sharing. Now, is there anyway to make the selection over the numbers scrolls at the same ...
Yes it is. You just need to be able to modify your header. 
Is it also possible to have the logo with the text and description?
Thank you. 
hi all i need to create a sitemap for my site www.diyanswerdirect.com so i can send it to google so ...
Comment by Christian Grabow on 14 May 2008:
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!
Comment by Richard Telofski on 15 May 2008:
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?
Comment by Anthony Navarro on 15 May 2008:
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
Comment by Richard Telofski on 19 May 2008:
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.
Comment by David on 19 May 2008:
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.
Comment by Poudie on 17 June 2008:
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/
Comment by Richard Telofski on 19 June 2008:
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.
Comment by Danni Gadson on 30 June 2008:
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
Comment by David on 6 August 2008:
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
Comment by Charles Dunne on 18 September 2008:
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?
Comment by Alistair Barnett on 18 September 2008:
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:
Comment by Lana on 2 October 2008:
Another question, can I change static video in sidebar with unique video for each post?
Thanks…
Comment by Alistair Barnett on 3 October 2008:
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:
For more information on using these conditional statements, go to this URL:
http://codex.wordpress.org/Conditional_Tags#A_Category_Page
Comment by aran on 7 October 2008:
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
Comment by StacyN on 8 October 2008:
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
Comment by StacyN on 8 October 2008:
FYI – I did use the style sheet recommedation you offered as a solution for Charles as well. Didn’t fix the stacking…
Comment by Alistair Barnett on 8 October 2008:
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.
Comment by Joshua on 10 October 2008:
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.
Comment by Michael G. Cohen on 10 October 2008:
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
Comment by Alistair Barnett on 11 October 2008:
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
Comment by Gary on 16 October 2008:
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?
Pingback by Comment ajouter des blocs 125*125 sur votre blog Wordpress | Another Pinky Punky on 5 November 2008:
[...] Р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. [...]
Comment by Alex on 16 November 2008:
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
Comment by Bikash on 25 November 2008:
Great post. It really helped me to change the look of my site http://www.1-800-usimmigration.com
Comment by Bikash on 25 November 2008:
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.
Comment by Safe Homes on 1 December 2008:
Thanks for the tip. This is exactly what I was looking for our blog.
Comment by Josh on 6 January 2009:
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.
Comment by bali web design on 9 February 2009:
I’ll try..
Hope it’s work..
Thx.
Comment by bali web design on 9 February 2009:
sorry, but the css doesn’t work..
Did I make any mistake?
I’ve followed yours.
Comment by bali web design on 9 February 2009:
Thx u very much..
Now it’s all working..
Comment by Alexis on 26 March 2009:
Good site, admin.
Comment by tuento on 21 May 2009:
wow…nice post.suited wonderfully to my problem.haven’t try it though,but i bet i’ll work
thx
Comment by Marcell on 1 June 2009:
Thank you soo much! I was searching for this for weeks..Great instructions also
Comment by Peter on 2 July 2009:
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
Comment by mikedurkin on 27 July 2009:
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.