A lot of WordPress users seems to be very interested by being able to display a random header image. So, here’s a simple recipe, using the php rand() function, to display a random header on each post or page.
To achieve this recipe, we will use the php rand() function, which allows us to get a random number between 1 and 99 (in this exemple).
If the random number is less than or equals to 33, the first header image will be displayed. Less than or equals to 66, the second header image will be shown, and same for the last one, which will be displayed only if our random number and less than or equals to 99.
Paste the following code in your header.php file:
<?php
$result_random=rand(1, 99);
if($result_random<=33){ ?>
<div id="header" style="background:transparent url(images/header1.png) no-repeat top left;">
<?php }
elseif($result_random<=66){ ?>
<div id="header" style="background:transparent url(images/header2.png) no-repeat top left;">
<?php }
elseif($result_random<=99){ ?>
<div id="header" style="background:transparent url(images/header3.png) no-repeat top left;">
<?php } ?>
<!-- Header code goes here -->
</div>
If you enjoyed this article, please consider sharing it!
Related Recipes
Leave a Comment
On Twitter : RT @Lindsey_ "No matter wht peculiar body a chicken or fish may come in,behind those eyes is a living,feeling being just like me"I.Newkirk
Theme & content : Copyright © 2008 - 2009 Jean-Baptiste Jung. Background image by Marvin Ristau, used with permission.
48 Responses
Thanks a lot for that very valuable cook, but I’m unable to implement it on my own wordpress with custom themes !
I inserted code at place of that code in my theme header.php file:
<!– <a href=”/”>
–>
But it breaks my site as then my header disappear completely
Any idea what’s wrong ?
Thanks a lot
Vincèn
Hi Vincen, of course you sometimes have to modify the recipes a bit to make it fit your theme.
On your site you’ll have to modify this element:
<div class=”Header”>
You’ll maybe also have to set up width and height for this element in your style.css file.
Good luck!
Yep thanks I got it that damn theme lol
Now it works pretty fine, just need to adjust a little the layout but idea is there 
Here to see result: http://www.skivr.com/
Thanks for all
Vincèn
Just thought about something to optimise the code. Let’s say I have ten pictures. Then I would do a random on 10, and directly call headerX where X would be replaced with random number
I don’t know how to code that 
$num = rand(1,10); //Get a random number between 1 and 10
and the:
<div id=”header” style=”background:transparent url(images/header<?php echo $num;?>.png) no-repeat top left;”>
Thanks for all
Great, thanks !
Thanks for this trick, now we can use different images for different pages.
Excellent, just what I needed! I’m using this for the featured post header on my blog.
I’ll try this tutorial
byme
Please replace the above example with jbj’s second comment. The tutorial’s code really isn’t pretty. This task should take two lines, no more.
Interesting recipe. Never knew that this existed. Could do some tweaking to my blog with this tutorial. Thanks for it.
I agree with amenthes. The code works, but it’s neither pretty nor easy to maintain. @jbj, why didn’t you use the code from your second comment in the post? It’s much cleaner and smaller. At the very least, why choose a random number from 0-99 and not from 1-3? If you add another image, you have to adjust the threshold on every “if” statement.
You could also have it choose an image at random from a directory. I have written about how I do this for my blog, here: http://zzamboni.org/brt/2008/11/03/how-to-display-random-header-images-in-a-wordpress-theme/
@ZZamboni: You’re right, the exemple code wasn’t that great, and I should use the code from my second comment instead.
I’ll probably write a second version for this recipe soon!
It’s still one of the shortest codes for the random header image that can be used immediately in blogs.
Thanks for that
Not just for wordpress though right? RAND is just a regular PHP function?
@Kris: Yes, rand() is a regular php function.
Hi,
Great post this will com in very useful, thanks.
I have a question that almost falls in to this posts remit. I am looking to have a background on the that would change dependent on a date, i.e. Halloween (31/10/.. as you all know) and a couple of other dates including christmas.
I have done this already for Halloween, but my php skills are still basic and I wrote a script to change it for one date like this…
How would I make it work for a date range as well, so I can show something different for a week or 12 days of christmas?
Ash
try again…
$date = date(’j,m’); // get todays date i.e 01/01 no year
$change_on_time = ‘31,10′; // set the change date
/*
echo $change_on_time;
echo $date;
*/
if($change_on_time == $date) { // when the change date is the same as todays date echo this
echo “body{ background: #F0EFE2 url(’http://www.c9dd.co.uk/wp-content/themes/default-empty/images/main_bg_halloween.png’) no-repeat center top!important;}”;
}
else{ // else do this
echo “body{ background: #F0EFE2 url(’http://www.c9dd.co.uk/wp-content/themes/default-empty/images/main_bg.png’) no-repeat center top;}”;
}
How would I make it work for a date range as well, so I can show something different for a week or 12 days of christmas?
Ash
Hi Ash,
Sure it is possible to do so with a time range. I wrote a recipe some time ago which might help you with time ranges:
http://www.wprecipes.com/fromtheold-asked-how-to-display-how-many-post-have-been-published-today
Good luck
Great, thanks
<div id=”header” style=”background:transparent url(images/header.png) no-repeat top left;”>
Same effect in one line of code. Also used mt_rand() as it gives better result than rand().
Great tip. if we have same image then regular visitor wont look at that part of the blog(blindness). this would help reduce that.
If you need to show a random header with maybe a quote or text to go along with it and to be able to add the seo in there too, I have found this does the job.
echo ” . “\n”;
$items = array(
1 => array(
‘quote’ => ‘Lorem ipsum dolor sit amet, consectetuer adipiscing elit.’,
‘title’ => ‘Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ‘,
’src’ => ‘http://www.youraddress.com/wp-content/themes/theme/images/headers/image001.jpg’,
‘alt’ => ‘Image of a man’
),
2 => array(
‘quote’ => ‘Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.’,
‘title’ => ‘Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.’,
’src’ => ‘http://www.youraddress.com/wp-content/themes/theme/images/headers/image002.jpg’,
‘alt’ => ‘Image of a man’
),
3 => array(
‘quote’ => ‘Lorem ipsum dolor sit amet, consectetuer.’,
‘title’ => ‘Lorem ipsum dolor sit amet, consectetuer.’,
’src’ => ‘http://www.youraddress.com/wp-content/themes/theme/images/headers/image003.jpg’,
‘alt’ => ‘Image of a man’
),
4 => array(
‘quote’ => ‘Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.’,
‘title’ => ‘Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.’,
’src’ => ‘http://www.youraddress.com/wp-content/themes/theme/images/headers/image004.jpg’,
‘alt’ => ‘Image of a man’
)
);
$item = $items[rand(1,4)]; // this need to be 1,? ?=the last entery number
echo “\t” . ” . $item['quote'] . ‘
‘ . “\n”;
// echo “\t” . ‘‘ . “\n”;
echo ” . “\n”;
good job brother that is a great idea
how to invisible image in single page
me
very interesting indeed. I noticed that there are many recipes here that i would have never otherwise known about. Its a great tip. thank you
Trackbacks: