Banner Ad Rotation Script and Sidebar Widget for WordPress

By |Last updated on |Technology, Web Development|8 Comments

This tutorial explains how to create a sidebar widget to rotate (or cycle) banner ads in WordPress using a few lines of Javascript. The technique can be used to cycle any type of ads, images or arbitrary HTML content in a WordPress sidebar widget.

Ad Rotation Development Options

An advertiser asked if it was possible to rotate or slide through several product images in a sidebar advertisement on to showcase their product line. The are several ways to animate, rotate or cycle through a banner ad images:

  1. Animated .gif
    Pros: Simple and “old school”
    Cons: Limited to a single click-through hyperlink, requires Adobe Photoshop (or similar) to create the .gif
  2. Adobe Flash animation
    Pros: Very capable and flexible
    Cons: I don’t have the Adobe Flash Builder software.
  3. WordPress Plugin
    Pros: Free
    Cons: I couldn’t find a plugin that I met my needs and/or was user friendly with good documentation.
  4. Javascript and Ad Images
    Pros: Full control over the source code and widget behavior. Each ad or image has a unique hyperlink. Supports any image format (jpg, png, bmp, gif).
    Cons: Requires HTML and Javascript programming knowledge, however I’ve done the “heavy lifting” for you.

Ad Rotator Sidebar Widget Solution Design

The Ad Rotator solution design is:

  • Create the HTML banner ad links.
  • Pre-load the source images into the web browser cache using Javascript.
  • Place the ad rotator HTML/Javascript code snippet with a <div> element in a WordPress “text” sidebar widget.

You can see this solution at work in animated ad located in the 2nd row of the sidebar on

Ad Rotator Sidebar Widget Source Code

The HTML and Javascript source code follows below. To make this work for you, modify the following elements:

  • Line 3: Paste the HTML for the 1st banner ad here inside the <div> … </div> elements.
  • Line 10: Update the image URLs to those for your ads. This can be a URL such as or a directory path. The example path for “/ads/AdImage1.png” means the image is located in the “/public_html/ads” directory on your web site domain.
  • Line 23: Paste the HTML for all banner ads here, adding new array elements if you need more than 3 ads. Take care to escape your quote marks with a backslash \ if single quotes are used inside the HTML statements.

Paste the updated HTML/Javascript code snippet into an arbitrary “Text” (arbitrary text or HTML) sidebar widget in WordPress from the AdminAppearanceWidgets panel.

<!-- Initial banner ad display. Note the SideBarAdWidget div id. -->
<div id="SideBarAdWidget">
  <a href="" target="_blank"><img src="/ads/AdImage1.png" border=0></a>

<script type="text/javascript">

// Set image URLs to be preloaded.
var imageURLs = new Array();
imageURLs[0] = "/ads/AdImage1.png";
imageURLs[1] = "/ads/AdImage2.png";
imageURLs[2] = "/ads/AdImage3.png";

var i = 0;
for(i=0; i<imageURLs.length; i++) {
   var x = new Image();
   x.src = imageURLs[i];  // Preload the images.

// HTML for ad links and images. Any HTML can be used here.
var adHTML = new Array();
adHTML[0] = '<a href="" target="_blank"><img src="/ads/AdImage1.png" border=0></a>';
adHTML[1] = '<a href="" target="_blank"><img src="/ads/AdImage2.png" border=0></a>';
adHTML[2] = '<a href="" target="_blank"><img src="/ads/AdImage3.png" border=0></a>';

var adIndex = 0;
function adCycler() {
  if (adIndex == adHTML.length)
    adIndex = 0;
  // Write the ad HTML into the <div> with the id SideBarAdWidget
window.setInterval("adCycler()",4000);  // Cycle through ads every 4 seconds (4000 msec).

The ad scripts works by:

  1. Displaying the initial ad in the <div id=”SideBarAdWidget“> … </div>
  2. Preloading the ad images for fast and smooth browser image transitions.
  3. Creating an array of HTML statements for the ads.
  4. The adCycler() function is called periodically to change the ad HTML in the <div id=”SideBarAdWidget“> … </div> by setting the innerHTML property.
  5. The window.setInterval(function, milliseconds) schedules the adCycler() function execution every 4 seconds (4000 msec).

Banner Ad Image Size

Take care the ad images are sized to fit the width of your sidebar, for example 300 pixels wide is standard. You can also set the img tag properties to resize the images to fit using width=”100%” of the sidebar <div> element or width=300 (pixels) as appropriate, for example:

<a href=””><img src=”” border=0 width=”100%”></a>

Thanks for reading,

Bob Jackson

Copyright © 2019   Reproduction strictly prohibited.


  1. Shen-Yu Sun January 14, 2011 at 6:27 pm

    Thank you so much for the tutorial! It helped me so much!

  2. Meg Rosner April 13, 2011 at 9:38 am

    Is it possible for the slide show to start on a different image each time the page is loaded?

    • Bob Jackson April 13, 2011 at 5:35 pm

      Change the code from:

      var adIndex = 0;
      function adCycler() {
      if (adIndex == adHTML.length)
      adIndex = 0;
      // Write the ad HTML into the

      with the id SideBarAdWidget
      window.setInterval(“adCycler()”, 2000); // Cycle through ads every 2 seconds.


      var adIndex = 0;
      function adCycler() {
      // Must generate the randomized adIndex withing the callback function.
      adIndex = Math.floor(Math.random() * imageURLs.length);
      // Write the ad HTML into the

      with the id SideBarAdWidget
      window.setInterval(“adCycler()”, 2000); // Cycle through ads every 2 seconds.
  3. Annabel February 28, 2012 at 1:25 pm

    Thanks so much for your help. Very handy indeed!

  4. Fred April 9, 2012 at 9:36 am

    Works flawlessly in one site widget, but not if you duplicate to use in two or more widgets, as I had hoped. Any thoughts? Thank you!

    • Bob Jackson April 9, 2012 at 6:55 pm

      Two or more widgets won’t work because I used global variables. The simple way to fix this is to copy the code and append a “2” to all variables and function names for the 2nd widget, a “3” for the 3rd widget and so on. e.g. adCycler2(), adIndex2, adHTML2[], var i2, etc. Not as elegant as redesigning to support several widgets, but since the code is very small the extra overhead doesn’t matter.

  5. Steve June 9, 2014 at 1:44 pm

    I have been looking for a plug-in that will show a random image from a set of images and allow a link from that image to a different website… I am trying to do this so we can have sponsors logos rotate randomly in a sidebar widget… problem is I need to make this simple so others can update it.. Best case would be a way to just upload and image and set the destination url and then the plug-in would just use it randomly… I can’t have the others modify the code to add or remove an image..
    Any ideas or suggestions?

    • Bob Jackson June 9, 2014 at 4:38 pm

      Hi Steve,
      You could try the Image Rotator Widget plugin. (Disclaimer: I have no experience with the plugin). It’s simple enough to use and there’s no coding. It requires Administrator rights and handing out Admin rights to others can be risky. It may be best to have the principle Administrator review, configure and test the sponsor logos and links (URLs) for quality assurance.

      Good luck!

Comments are closed.