The Robservatory

Robservations on everything…

 

Random header images for WordPress

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:

montage

(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:

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:

    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:

    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.

14 Comments

Add a Comment
  1. I really like how you did this but unfortunately I can’t get it to work on my site. I think my code is a bit different and I’m not sure which bits are affecting the outcome. I’ll keep trying because I really like the result.

  2. Many thanks for posting your code Rob. This is exactly what I was looking for – a simple, straightforward random image header without any unnecessary extras or plugins etc. It works great!

  3. Thank you ever so much for this, Rob. I fought like a newbie for hours with some other folks’ version, but yours was easy to follow, and it works like a champ.
    Thanks again!

  4. This is a great piece of code, but is there any way for it to work w/o disabling WP-Cache? I can only get the images to rotate when I clear the cache or just turn off caching. Anybody else had similar problems?

  5. Avita: Sure.

    Jonathan: Not sure :) … I don’t use wp-cache, but it makes sense that it would stop working with cache enabled. There may be some way to say ‘don’t cache these images,’ but I’m not sure what it might be.

    -rob.

  6. This worked perfectly, thanks! I’ve been searching for simple and straightforward code for a background image rotator for a couple weeks now and this is the only one that’s worked for me.

  7. YES!!! Thank you so much. I have been looking for an easy way to do this for a while, and this works like a charm. You Rock!!

Leave a Reply

The Robservatory © 2018 • Privacy Policy Built from the Frontier theme