WordPress Hack: Rotating Banners


As you know I use WordPress as my blogging platform simply because I love PHP and the simplicity that comes with a beautiful syntax. This post shows you how to create a rotating banner for your WordPress blog.

Getting Your Banners Together

First of all this is just a dirty template hack that will not go away as you upgrade your WordPress distribution. The first step is to create a set of banners you want to rotate and name them sequentially. For example, mine are named vladville-bar1.jpg, vladville-bar2.jpg, vladville-bar3.jpg and so on. Here they are:





Look familiar? Great. Notice how only one number in the filename changes? Now upload all of these banners to the same directory, mine are in /images.

Hack The Template

The second step is to actually hack the template file. Because WordPress is PHP based you can embed PHP code anywhere in your template. Mine is in the header.php but you can use this trick anywhere you want to.

Remember how only the number was different? The only thing I did was instruct PHP to select a random number from a range and insert that number in HTML code. So here is the entire mastery:

<table background=”/images/vladville-bar<?php echo rand(1,23); ?>.jpg” width=”800″ height=”155″ border=”0″>

Thats the entire mastery right there. When the template is parsed by WordPress and PHP it will call a rand function which returns a random integer in the range between 1 and 23. I happen to have 23 images on the server so returning a random number between 1–23 will return a number of one of the images in that range. The <?php part tells the server to start interpreting the next block of text as code instead of just plain filler. The ?> stops it. The echo sends stuff back to be printed and 1,23 are parameters sent to the rand function. Every time the page is reloaded the rand() function should return a different random number between 1–23 giving my visitors a different random banner from my pool of 23. For example:

First time rand(1,23) executes it returns 5. As a result, you will see vladville-bar5.jpg

<table background=”/images/vladville-bar5.jpg” width=”800″ height=”155″ border=”0″>

Second time rand(1,23) executes it returns 17. As a result, you will see vladville-bar17.jpg

<table background=”/images/vladville-bar17.jpg” width=”800″ height=”155″ border=”0″>

Thats all there is to it but I figured I’d start slow and build up. Imagine the possibilities here, you can insert greetings based on the time of day, display random quotes, insult visitors by guessing their IQ with rand(5,30) and so on.

So get creative. Your blog does not have to be borg it should reflect your individuality. After all, its all yours.

10 Responses to WordPress Hack: Rotating Banners

  1. Alex Tyson says:

    Wow that is very simple. I guess its easy to say something is simple when someone lays it all out for you and explains it in the words you understand. You have far too much time on your hands.

  2. Cliff Roberts says:

    Well that’s pretty rude. Guy shows you something cool and you insult him. I can tell from your own blog link that you must already know everything so why even read or respond to vlads blog?

  3. Karl says:

    Makes me wish I did wordpress instead of mt. Not as flexible or easy to tweak.

  4. Pingback: wehuberconsultingllc.com » Blog Archive » WordPress Hack: Rotating Banners

  5. Pingback: Rotating banners for Wordpress

  6. Eric says:

    This rocks, thanks! Super simple too.

  7. Pingback: Blogspace of Eric Brodeur » New year, new theme

  8. Pingback: ..:: ExaSpring’s Blog ::.. Web Hosting, Web Designing and SEO Blog ::.. » Blog Archive » New year, new theme

  9. Pingback: ..:: ExaSpring’s Blog ::.. Web Hosting, Web Designing and SEO Blog ::.. » Blog Archive » New year, new theme

  10. Bill says:

    I’ve got a question: can this same thing be implemented on a css page? My blog template uses this to display the header:
    background: url(images/appliedthinking22.jpg)no-repeat top;
    font: 18px Arial, Helvetica, sans-serif;
    height: 201px;
    letter-spacing: -1px;

    …and it is saved on style.css. Will this rand function work on that?

Comments are closed.