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