Modifying your theme to include random header images doesn’t have to be difficult. In fact it isn’t any more complicated than adding a few lines of code to the header.php file. I’ve created themes with random header images using a number of different techniques and this is by far the simplest way ever. It may not be the most efficient technique or the most random but it is easy.

Note: This really only works for headers that are square cornered. When you make a header with rounded corners, Artisteer creates two images. One is a square cornered .jpg that sits on top of a rounded corner .png image. We could make a random rotator for the two different images but then it would defeat the purpose of being super simple. So we’ll save that for another time.

The first thing you need to do is create your new header images. They need to be the exact same size as your original image. You can make as many as you want. Create a new folder called ‘headers’ in the images folder of your theme. You need to name the header images as follows:

  • header_1.jpg
  • header_2.jpg
  • header_3.jpg
  • header_4.jpg
  • header_5.jpg
  • header_XX.jpg

Now open your header.php file in your favorite text editor and find the following code…

<?php wp_head(); ?>

</head>

Then add the following code between wp_head and /head…

<style type="text/css">
div.art-Header-jpeg {
background-image: url('<?php bloginfo('template_url'); ?>/images/headers/header_<?php echo(rand(1,5)); ?>.jpg');
}
</style>

The new CSS style above is the key to everything. Since we are using some PHP to generate a random number we can’t include it in our CSS file. By putting it in the head after our original style.css declaration we will automatically override the default CSS.

This bit of code is what does all the work…

<?php echo(rand(1,5)); ?>

It generates a random number and appends it to the name to generate a new random image name. You can change the last number (5) to match the total number of header images you create if you want more or less than five. The more images you have the more random the generator will seem. If you don’t have an image with the new generated name there will not be an image displayed, since it couldn’t find it.

As you can see from the image below, the original CSS style has been replaced by the new style.

rotate-css

NOTE: If you want to use a different image format than jpg, then just change the extension in the new style you added.

That’s it. Now you can have a random header with minimal modifications to your theme files.

  • Billy says:

    Thanks man, this is exactly what I needed!

  • Rob says:

    Hi,

    Where can I find that header.php? He’s not in mine template. I’m using Artisteer 2.4. Is that making any difference?

    • admin says:

      No problem with the newest version of Artisteer.

      The header.php file is located in your theme directory…

      your-site.com/wp-content/themes/your-theme-name

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“Think of how stupid the average person is, and realize half of them are stupider than that.”

by George Carlin