I’ve finally migrated my family’s site over to the latest version of WordPress, and installed pretty much the same batch of plug-ins and widgets as I use here. However, I wanted something else, too–a randomly-selected image for the header of the site that changes each time the page is loaded, as seen in these four sample pictures:

(The header images are just sections I’ve snipped out of photos we’ve taken, with an artsy Photoshop filter of some sort applied.)

I searched the web, and there are a few plug-ins that offer this ability, but they came either too feature-rich, or required some additional JavaScript to work properly. I wanted the most simple, basic, and functional header image rotation solution I could find…so I wrote my own, which required all of two lines of code. I’m posting it here so that (a) I remember how I did it, and (b) in case anyone else wants a simple solution, they’ll be able to find it with some help from Google (our family’s site is access restricted, so posting it there wouldn’t do much good…and it would confuse my relatives, who are used to only seeing pictures of our kids there!)

My solution is based on having a theme that loads the header image in the theme’s CSS file–this is the norm among the themes I’ve seen. In your theme’s CSS file, you’ll probably find a declaration like this one:

#header {
    background: url(img/header_pic.jpg) no-repeat center;
    color: #FFFFFF;
    height: 105px;
    width: 760px;
    margin: 0;
    padding:0;
}

My solution is to simply replace the background: url bit of that declaration with a new definition. So here’s how I did it.

1. Create a folder of header images within your theme’s img folder. I called my folder headerpix. Within that folder, name each image sequentially. In my case, I named the files header1.jpg, header2.jpg, etc.
2. Open up your theme’s CSS file and comment out (surround it with /* and */) the background: url definition (or just delete it).
3. Open up your theme’s header.php file, and find the line that loads your stylesheet; it should start something like this:

   <link rel="stylesheet" href="<?php bloginfo('stylesheet...

   The trick here is that once your stylesheet has loaded, you can refine it by defining new styles directly in the header.php file.

4. Below the line that calls you stylesheet, insert the following code:

   <?php
     // Replace 26 with the number of images in your folder!
     $imgnum = rand(1,26);
   ?>
   
   <style type="text/css">
     #header {
       background: url(<?php bloginfo('template_url');?>/img/headerpix/header<?php echo $imgnum; ?>.jpg) no-repeat center;
     }
   </style>

   If you didn’t name your folder headerpix, or your images header#.jpg, then modify the background line above as appropriate (and make sure you change the $imgnum line to reflect your image count).

That’s it–you’re done. Your site’s header image should now change randomly each time the page is loaded. There’s a ton more that could be done with this code, obviously (it should be possible to get the image count from the folder itself, instead of hard coding it), but it works well for me–and my relatives love the rotating collection of images that now appear atop the page each time they load it.

This entry was posted on Sunday, March 18th, 2007 at 10:04 pm and is filed under General, Site News, Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.