Making Headers Random

May 8th, 2007

After realizing that Luigi rarely ever gets noticed I decided to make a header for my Virtual Console site with him in it. I didn’t want to change anything about the header, so I just removed Mario and put Luigi in instead. I then realized that I’d rather have both headers for the site, but just make it randomly select one so that there would be a 50/50 chance of seeing Luigi in the header.

It took me a little while to figure how to do this without adding another WordPress plugin so I started looking into some php, which by the way I know very little about; I eventually came up with this solution.

First I put this into the header file of the template:

<?php
$random = mt_rand(0,1);
?>

Then all I did was edit the CSS file so that I had two different entries for the two different headers, which look like this:

#masthead0 {
background: url(images/masthead0.png);
width: 600px;
height: 150px;
margin: 0 auto;
padding: 0;
}

#masthead1 {
background: url(images/masthead1.png);
width: 600px;
height: 150px;
margin: 0 auto;
padding: 0;
}

Lastly all I had to do was change the DIV code for the header a little bit, which it now looks like this:

<div id="masthead<?php echo($random); ?>"></div>

So basically all this little hack does is add either a 0 or a 1 to the end of the id name, thus it will either be id=”masthead0″ or id=”masthead1″ respectively. All and all an easy little way to make a random header without the need of any plugins. To increase the number of possible headers change the 1 in the first bit of code to a higher number.

See it in action over at my site about the Virtual Console, just reload multiple times to get the second header image to show up.

Leave a Reply