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.