Simple Javascript banner ad rotating snippet

Here’s a simple javascript snippet to rotate ad banners. You can use it in your WordPress sidebar as a widget to rotate the ad banners. At the moment of writing this post, we’ve got the banners rotating in our sidebars using this snippet.

ad_banner_sidebar
This is the current sidebar (for future reference.)

The following snippet can be used to update two ads. You will need replace BANNER CODE 1 and BANNER CODE 2 with your banner code.

Your code should be within the single quotes. Only replace BANNER CODE 1 and BANNER CODE 2, unless you know which code you’re editing.

// The div where ad is displayed
<div id="ad_banner">

</div>
<script>
    // Replace BANNER CODE 1 with your banner code
    var ad1 = 'BANNER CODE 1';
    // Replace BANNER CODE 2 with your banner code
    var ad2 = 'BANNER CODE 2';
    // function to auto change banner ad
    function changeBanner() {
        var banner = document.getElementById('ad_banner');
        banner.innerHTML = ad1;
        setTimeout(function() {
            banner.innerHTML = ad2;
        }, 5000);
    }
    changeBanner();
    // Time for the functon to re-iterate
    setInterval(changeBanner, 10000);
</script>

Steps to implement it in WordPress:

  1. Copy the above code and update both ad1 and ad2 with your banner code (you will just need to enter the banner code within the single quotes)
  2. Access your WordPress dashboard > Appearance > widgets
  3. Drag and drop the widget named ‘custom HTML’ to your sidebar
  4. Copy the code within the ‘content’ field and save it

Usage for three or more banners

We can modify the above code to work with three or more banners as well. If you have exactly three ad banners, you can use the below snippet directly. (Make sure you update ‘BANNER CODE‘)

<div id="ad_banner">

</div>
<script>
    // Define variables
    var ad1 = 'BANNER CODE 1';
    var ad2 = 'BANNER CODE 2';
    var ad3 = 'BANNER CODE 3';
    // If there's another banner, we define it in this section
    function changeBanner() {
        var banner = document.getElementById('ad_banner');
        // first set the initial banner
        banner.innerHTML = ad1;
        // second banner that loads in 5 sec after page load
        setTimeout(function() {
            banner.innerHTML = ad2;
        }, 5000);
        // third banner that loads in 10 sec after page load
        setTimeout(function() {
            banner.innerHTML = ad3;
        }, 10000);
        // If you have another banner, the code goes here. Just before the closing '}'
    }
    changeBanner();
    setInterval(changeBanner, 15000);
</script>

If you need to add a fourth banner, you will need to first define it as below:

var ad4 = 'banner code here';

Now, copy the below snippet and paste it below the third banner:

setTimeout(function() {
    banner.innerHTML = ad4;
}, 15000);

Change setInterval time to 20,000. Which means setInterval(changeBanner, 15000); is now setInterval(changeBanner, 20000);

Basically, we’re increasing the set timeout time for the last banner by 5000ms and also the interval time by 5000 everytime we add a new banner.

That’s it regarding ad banners. Please feel free to leave a feedback or suggestion in the comments below.

/ / /

Report (Please include link to post while reporting)

Leave a Reply

Your email address will not be published. Required fields are marked *