Setting up a randomlyrotating header image

To add some real design pizzazz to your WordPress theme, every time the page loads, you can randomly display different photos or other images in the header section of your theme. You can use this as a technique to generate interest for your visitors, or just as a fun personal experiment. With the method in this recipe, you'll be up and running in no time.

Getting started

You should have a basic theme skeleton created, in order to take advantage of this recipe. In addition, you should also have created a variety of possible header background images, preferably each of the same size.

For the purpose of this recipe, you'll be working under the assumption that you want to randomly rotate the image displayed in the header section of your theme each time the page reloads. The blog title will sit on top of the random image.

First, you need to place the images in the correct place so that the code we're going to write can get to them.

Open the directory that your theme lives in, and create a new subdirectory called header-images. Inside this directory, place all of the images you want to rotate through your header. The following are some examples of images you could use for an application like this:

After gathering the images, you need to write the function that will return the appropriate image URL. Open or create your theme's functions.php file, and insert the following code into this file:

function wptc_get_header_image() {

$headers_path = TEMPLATEPATH . '/header-images/'; $headers = array();

if(file_exists($headers_path)&&is_dir($headers_path)) { $dir = opendir($headers_path);

$stylesheet_dir = get_bloginfo('stylesheet_directory'); while(false !== ($file = readdir($dir))) { if('.' == $file || '..' == $file) { continue;

$image_info = getimagesize($headers_path.$file); if(false !== $image_info) {


$rand = array_rand($headers); return $headers[$rand]; } else {

return false;

This function returns the URL to one of the images in the header-images directory that you created. Alternatively, if there are no images in the header-images directory, the function returns false.


Next, after creating this function, you're ready to write the appropriate HTML and CSS. You should know ahead of time what size your images are, so this part is pretty straightforward. First, write the header HTML (this may belong in either the index.php file or the header.php file):

$header_image = wptc_get_header_image();

$style = "background-image:url('{$header_image}');";

<div id="header" style="<?php echo $style; ?>">

<h1><?php bloginfo('name'); ?></h1> </div>

Then follow up with the appropriate CSS in the style.css file:

margin: 0 auto; width: 96 0px;

background-repeat: no-repeat;

color: #000000;

text-align: center;

height: 120px;

line-height: 120px;

width: 96 0px;

In this code sample, you can see that you first attempt to retrieve a random image from the header-images directory, using the new function that you wrote, you then assign a style declaration to the $style variable. When you create the header element, you assign an inline style with the random image as the background image. In addition to the inline style, the header element has some styles applied that color the text contained within and center it, both vertically and horizontally, to increase the aesthetic appeal.

After you do all of this, you get a nice random header. The following screenshots show a random header image:

The most important part of this recipe is the random image determination function. You make the function available throughout your theme by creating it in the functions.php file that WordPress loads as part of its startup process.

First, the wptc_get_header_image function checks to make sure that the appropriate directory exists in your theme and is available for reading. After these conditions are verified, PHP opens the header-images directory and iterates over each file in the directory. The filenames . and .. are excluded because they have special meanings in the context of the file system and do not need to be considered in this case. Every other filename in the directory is verified to be an image, and if it is, it's added to an array of header image possibilities.

After the array of possible image URLs is complete, the function verifies that at least one item is present in the array. If the array is not empty, a random key is retrieved from the array using array_rand, and the array item for that key is returned. If the array does not have any items in it, then the false literal is returned.

On the front-end, directly above the markup for the header, you call wptc_get_header_ image to get a random URL for an image. If an image URL is returned, you populate the value of the $style variable with the appropriate background-image declaration. Otherwise, the $style variable remains undeclared.

In the declaration for the header div, you add the contents of the $style variable as an inline style, in order to make the background image of the header change at render time. When the page is displayed, the image is fetched and placed in the background of the header div, and the header text (in this case the blog's name) renders on top of the image.

Was this article helpful?

0 0
Blogging Bounty

Blogging Bounty

Finally Learn How To Use Your Blog As A Cash Machine And Stop Wasting Your Time! This Book Is One Of The Most Valuable Resources In The World When It Comes To The Network Marketers Guide To Leads Through Blogs!

Get My Free Ebook

Post a comment