So, this is something I figured out myself and that I am pretty proud of, because I actually have no idea about PHP. I just have some history in coding and basically know how syntax does generally look and where to tweak.
So, I was searching for a way to rotate the headerimages for this page without much hassle like having to setup lists of images to be used and similar. I just wanted to be able add/delete images into a specific directory and have some script figure the rest out.
One of the easiest ways is obviously to use a script as header-image (mostly called random.php, there are loads of resources on the web about this) which reads all the images in a directory, selects one randomly and displays it.
The problem with this approach is that the images are not cachable, the browser is trying to load an image called “random.php” and the server returns a different file everytime this happens. Bad solution.
Then I found a solution by John Crenshaw from Wordpress-Hacks.com which was nearly the solution I was looking for. The only problem his solution had: It dynamically generates a complete <img>-tag in your wordpress-header.php which is fine as long as your really just want to have an image as header.
But I wanted an image that is displayed as background-image of a div (you know, for fancy text over it and stuff).
So, without further ado, my solution:
- You create a directory within your themes-folder, I called mine “header” (wp-content/themes/yourtheme/header/)
- Upload all the header-pics you want to use there, jpg, gif and png will work.
- Edit your functions.php file and add this at the end:
function randomHeader() {# Init files array
$files = array();
# Set header images directory
$dir = get_template_directory() . '/header/';
if(!is_dir($dir)) {echo 'The specified header image directory is not a valid directory.';
// DEBUG
//echo $dir . '<br />';
}else{if($handle = opendir($dir)) {while(($file = readdir($handle)) !== false) {if(preg_match('#(\.jpg$|\.gif$|\.png$)#', $file)) {$files[] = $file;
}
}
closedir($handle);
# Generate random number between 0 and size of files array
$num = mt_rand(0, sizeof($files) - 1);# Echo random header image
echo get_bloginfo('template_url') . '/header/' . $files[$num];}else{echo 'Could not open the specified directory.';
// DEBUG
//echo $dir . '<br />';
}
}
}
As I said earlier, original, marvellous code by John Crenshaw, all credit to him.
The two small things I changed:I changed the rand()-function to mt_rand(). Actually I have no idea why, but google told me it’s a good idea. (Remember, I honestly don’t have a clue about PHP).
But the more important part: His echo-function (is this even the correct term?) has changed from creating an <img>-tag to just give the URL of a random image from the /header/-directory we created earlier.
- And now comes the sweetness: Edit your header.php and style.css files.
Usually you have a <div id=”header”> and a corresponding #header in the css-file where a background image is defined. Remove the URL part for #header in the styles.css. Now edit header.php and change the <div id=”header”> into<div id="header" style="background-image:url('<?php randomHeader(); ?>');">
Cool, you’re done: Random; cacheable, fully css-able header images without any effort of maintaining a database or similar.

2 Comments
I’m pretty new to wordpress, stumbling along as I learn. I had found John Crenshaw’s version of the random header, and got it to work on Firefox, but not Explorer. I tried your changes, and it still works great on Firefox, but now on Explorer instead of a blank header with a boxed “X” icon (what I was getting before with Crenshaw’s version), I just get a blank header.
Any suggestions for where I’m going wrong, or how to get Explorer to see my headers?
Thanks!
jpotter
Great article, i
hope can know much information About it!