Rotating WordPress Header

Ever seen those spiffy WordPress blogs with automatic changing headers? Some people dislike the effect because they find the animation to be too distracting.

I think this slide-show type, rotating header effect can be interesting in certain circumstances. This blog page, for example, has a demo rotating header. I have set the speed of rotation to be about 5 seconds so that you can see the changes occur.

In general, however, you want to set a much longer rotate period so that the animation does not happen too often and does not become too distracting to your readers.

The rotating header effect is actually not too difficult to achieve with JavaScript and the jQuery library.

1. Include the jQuery library

Add the code below to the functions.php file of your theme. Better yet, you may want to create a child theme, and include it in your child functions.php file. By using a child-theme, all this code will automatically transfer even when you make theme updates.

<?php
	add_action('init', init_method);
	

function init_method() {
	wp_enqueue_script('jquery');	
}    
?>

2. Rotate header function using the jQuery library

The example rotateHeader Javascript function below changes the header image of the Shiba WordPress theme. Just include it in your functions.php file.

<script type="text/javascript">
<!--
counter = 1; 
num_images = 9;
dir = "http://www.shibashake.com/wp/images/slides/Tattoo/Header";

function rotateHeader() {
 	
	var header_img = 'url(' + dir + '/image' + counter + '.jpg)';

	jQuery('#header').css('background-image', header_img);		
	counter++; if (counter > num_images) counter = 1;
}
//-->
</script>

Lines 3 to 5 – Sets up some global (static) variables for our rotateHeader function.

• counter specifies the current image being shown.
• num_images specifies the total number of images you want to rotate through.
• dir is the URL directory of the header images you want to use. We assume that the images in the directory are named image1.jpg, image2.jpg, and so on.

Line 11 – Uses jQuery to reset the header background image. To use the code for your own theme, you must identify the container id for your theme header image, and replace #header name with your own theme header id.

3. Calling the rotateHeader function

Now all that is left is to call the rotateHeader function after a certain set interval of time. You can do this using the Javascript setInterval function.

<script type="text/javascript">
<!--
setInterval( "rotateHeader()", 5000 );
//-->

Include the setInterval command at the beginning to any post or page whose header you want to rotate. If you want all pages and posts to rotate, you can include it in your functions.php file.

This setInterval command causes the header background image to change every 5 seconds.

The first argument is some Javascript code which gets executed every set interval. For the sake of code readability, this is usually the name of a function which encapsulates all the code you want to execute.

The second argument is a time interval in milliseconds. 5000 milliseconds = 5 seconds.

You are done!

Adding this JavaScript code will give you a rotating WordPress header.

4. Pre-load rotating header images

A problem with just using the code above, is that there may be long delays every time a new header image needs to be loaded. This may result in a blank header, while a new image is loading.

To get the best effect, you want to pre-load all the header images before starting with the image rotations. Here is an example of how you can pre-load images in an object oriented fashion using Javascript.

Here is a cleaner and simpler way to pre-load images by just adding HTML code.

Just add your Javascript setInterval function to the onload event so that you will only start to rotate your header after all the images have finished loading.