Some people are never satisfied. They liked the Super Simple Random Header Image but they wanted more :mrgreen: . They wanted the header images to change every 10-15 seconds without having to refresh the page. So after a little head scratching and searching I’ve found the solution.

This tutorial will be aimed at Artisteer generated themes, but it will work for virtually any WordPress theme. This will also only work with Artisteer themes with square header images. Rounded headers have two images, a .png that provides the round corners and a .jpg that is positioned on top.

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(); ?>

Then insert this code directly above it…

<?php wp_enqueue_script('jquery'); ?>
<script type="text/javascript">
counter = 1;
num_images = 5; // Enter the number of images to rotate
dir = "<?php bloginfo('template_url'); ?>/images/headers"; // This is where your images are stored

function rotateHeader() {

	var header_img = 'url(' + dir + '/header_' + counter + '.jpg)'; // jpg, png, or gif

	jQuery('.art-Header-jpeg').css('background-image', header_img); // .art-Header-jpeg is the div you want to replace
	counter++; if (counter > num_images) counter = 1;


The above code enables JavaScript and does all the work of rotating our images.  The code is commented so that you can change some of the default values.

Next change the body tag to look like this…

<body onLoad="javascript:setInterval( 'rotateHeader()', 10000 );"> <!-- Set time in milliseconds 5000=5 seconds -->

This bit of code will enable the rotation script but not until after the page loads.

The next thing that we need to do is pre-load our header images so that there is no delay in displaying our headers. The easiest way to do this is in an invisible DIV. We will tell the browser to load the images and then we will style the DIV to display:none.

Add the following code right after the < body > tag…

<div style="width:1px; height:1px; display:none;">
    <img src="<?php bloginfo('template_url'); ?>/images/headers/header_1.jpg" />
	<img src="<?php bloginfo('template_url'); ?>/images/headers/header_2.jpg" />
	<img src="<?php bloginfo('template_url'); ?>/images/headers/header_3.jpg" />
	<img src="<?php bloginfo('template_url'); ?>/images/headers/header_4.jpg" />
	<img src="<?php bloginfo('template_url'); ?>/images/headers/header_5.jpg" />

In this example we’re rotating 5 different images. If you want more or less you just have to make sure and adjust the code accordingly.

That’s about it. Remember if you have any questions just drop me a line.

  • Billy says:

    You are the MAN!!! Thanks so much for this Bud, you have helped me out a bunch! Looking foward to more great tutorials!

  • Gerry says:

    great explanations in your posts.

    just one question: RE:Dynamic Header Rotation For Your WordPress Theme

    You lost me when editing the body tag. Where do I do that? sorry for the newbie question.


    • admin says:

      The body tag is in the header.php file. It’s the third small block of code above that shows the modification.

      • Jan says:

        My header didn’t have a body tag so I just put it in order with the rest of the code (as we speak!) if it doesn’t work I’ll post back.

      • Jan says:

        Nope, I have to modify the banner not the header.. any thoughts on how to do that?

  • Anne says:

    Hi there,
    I followed your directions, but must have done something incorrectly. When I check the site, the only the original Artisteer header is there (which is a blank white background). The headers are not showing up. Would you please check the code and let me know what I need to change? Thank you!!
    P.S. I’m starting with only 2 images to test it out and will add more once I get it working. Thanks!

    (The code won’t fit here. Please let me know if I can email it to you. Thanks)

    • admin says:

      It should work because all it’s doing is substituting an image into the header DIV.

      Do you have all the header images created? And are they in the correct directory? Do the file extensions (.jpg, .png etc) match?

      If everything looks right and it still doesn’t work then use the contact form to get a hold of me.

  • Anne says:

    Highly recommend this tutorial. It worked great, and Bud was super helpful and responsive!! I love my rotating header images!

  • Will be using it for our site, thanks for the great info!

  • Jim says:

    I started from scratch and it’s working now.. :-) It would be good if the images faded out and in.. as it’s a bit “harsh” currently.

    Good work though – well done!

  • Laura Brown says:

    I just wanted to leave a quick note for Bud. He is so amazing. It was the most helpful anyone’s been to me in awhile. I was stuck with a project due the next day and happen to email Bud on this topic here and he spent 5 maybe 6 solid hours working with me by email and helping me with my files back and forth. It’s so refreshing to have people like him out there willing to help genuinly. Bud, I appreciate your help and if anyone’s looking for help I’ll be sure to mention your name. Thanks and I’ll be in touch with you. Thanks!

  • jim says:

    Trying to get this to work on your pink cadalic theme with a peel image header, can you show me where the body code should look like? I have tried everything and can’t get it to work. I got the peel to work but can’t get the header rotator to work, my error says rotate header is not defined.

    Any help would be appreciated.

    • admin says:

      It could possibly be a jquery conflict. I haven’t tried them together. If you can make each one work without the other then I would assume a conflict somewhere. Unfortunately I don’t have the time right now to figure it out.


  • Scholarship says:

    Just saying thanks a lot. :)

  • Karl says:

    Will this work on a Joomla template built in Artisteer 2.4?

    • admin says:

      I never tried but it should. The only thing would be WordPress specific stuff like enqueue script and any php functions specific to WP.

  • jos says:

    Just wanna say thanks for sharing your solution.

Awesome Themes

Genesis Framework for WordPress

Favorite Random Quotes

“Laws are like sausages. It's better not to see them being made.”

by otto von Bismark