Tutorial: Rotating Header Images

Chris Pearson wrote several themes before he began working on Thesis. Two of the most popular were Cutline and Neoclassical. A feature these themes shared was rotating header images which changed each time the screen was refreshed, much like the Multimedia Box does now.

This article shows you a quick way to implement the Neoclassical- and Cutline-style rotating headers in Thesis. It is done entirely with a function in custom_functions.php. The header image is clickable. I wrote this function for Fred First’s blog, Fragments from Floyd when he switched from Neoclassical to Thesis. Another demonstration can be seen at my Thesis Demo site.

Here’s how to do it:

1. Make a new folder in /thesis/custom for the header images. Mine is called /header_images.

2. Put your header images into this folder. There is no limit to the number of images you can use. They should be named “header_1.jpg,” “header_2.jpg” etc, just like in Neoclassical and Cutline.

The images must all be of the same file type: .jpg, .gif, .png etc. So if you are using .gif files, the first header image would be named “header_1.gif” and so on. See Step 6 to set the image file type.

Make sure your header images are sized appropriately. If you are uncertain, see “Using the Layout Constructor to Build and Tweak a 1, 2, or 3-column Design” in the Thesis User’s Guide. At the bottom is information on the best header image sizes for 1-, 2-, and 3-column layouts. It is strongly recommended that all your header images be the same size — it would be jarring to the user to have the header jumping around at each page refresh!

3. Put the following code into your custom_functions.php file:

/* Rotating Header Images */
function rotating_header_images() {
	/* Change the second number to the number of header images you are using. */
	$random_image = rand(1,3);
?>
	<!-- Change the width and height to your image size -->
	<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo(template_url)?>/custom/header_images/header_<?php echo $random_image;?>.gif" width="905" height="140" align="center" alt="Random header image... Refresh for more!" /></a>
<?php
}
add_action('thesis_hook_after_title', 'rotating_header_images');

4. Change the second number in the “$random_image” statement to the number of header images you are using. It is set to 3 in the example.

5. Change the file type if necessary. It is set to “.jpg” now, but it can be other types of images — but remember, they must all be the same!

6. Change the width and height values to that of your header images. If your images are presized to fit, you can delete these two values entirely.

7. Change the “alt” text if you wish.

This function inserts the header image after the blog title, just like in Neoclassical and Cutline. If you want to have rotating images instead of a blog title, use “thesis_hook_before_title” in the “add_action” statement (if your blog title is part of the image, for instance).

I hope this short guide was informative and easy to follow. You are invited to make a comment below. You also may email me by using the “Contact” tab in the button bar.

©2009 Michael L Nichols. All rights reserved.

Related Articles

• Two New Articles! Rotating Header Images and Upgrading Thesis (1)
• Tutorial: Rotating Image Gallery for Pages and Sidebars (13)
• New Article! Tutorial: Rotating Image Gallery for Pages and Sidebars (0)

Tagged as: Header, Rotating Images