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 HandymanHowTo.com 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 HandymanHowTo.com.

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 http://mysite.com/ads/AdImage1.jpg 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="https://www.handymanhowto.com" target="_blank"><img src="/ads/AdImage1.png" border=0></a>
</div>

<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="https://www.handymanhowto.com" target="_blank"><img src="/ads/AdImage1.png" border=0></a>';
adHTML[1] = '<a href="http://www.woothemes.com" target="_blank"><img src="/ads/AdImage2.png" border=0></a>';
adHTML[2] = '<a href="http://www.xkcd.com" 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
  document.getElementById("SideBarAdWidget").innerHTML=adHTML[adIndex];
  adIndex++;
}
window.setInterval("adCycler()",4000);  // Cycle through ads every 4 seconds (4000 msec).
</script>

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=”https://www.handymanhowto.com”><img src=”http://handymanhowto.com/ads/AdImage1.png” border=0 width=”100%”></a>

Thanks for reading,

Bob Jackson

Copyright © 2017 HandymanHowTo.com   Reproduction strictly prohibited.