Category: Technology

One of the very first things I want to do to the blog in the new year is to change its look, with a very simple twist – rotate the header image. The very good theme I installed six months ago was the Thesis theme, but the standard installation does not include a header image auto rotation – something that is a standard for many WordPress themes. As I believe I am not the only one in the world want to do this, so I did a search in Google and of course the search results did not disappoint me. Anyway, here are the step-by-step instructions with some more details.

Step 1. Create your series of rotating banners. All I did was to create a few more header images with a size same as the current image. However, to make it works with the following hook, the header images should have the same name followed by an identifying number. For example, in my case, I created 5 banners from my photos and named them header_1.jpg, header_2.jpg, header_3.jpg, header_4.jpg, and header_5.jpg. Note that if your files are GIFs, then name those files *.gif. And as you may aware, you cannot mix jpgs and gifs with this hook.

Step 2. Upload your header images to a folder inside your site. In my case I created a folder named “headers” inside the “custom” folder of my Thesis Theme. If you don’t like the name “headers”, change it to anything but don’t forget to change the script below.

Step 3. Create a new file in your preferred text editor and copy the following code and then save the file as “rotating_images.php”

<?php
$random_image = rand(1,5);
?>

<a href=”<?php bloginfo(‘url’); ?>”><img src=”<?php bloginfo(‘template_url’); ?>/custom/headers/header_<?php echo $random_image; ?>.jpg” alt=”Random header image… Refresh for more!” /></a>

Upload this file to the custom folder in your Thesis Theme (the same folder that custom.css & custom_functions.php reside in). The boldfaced texts are those that you may want to change to fit your settings. For example, the second number in the call rand() should equal to the total number of images that you want to rotate. I found that to achieve best effect, try 4 to 5 images for rotation.

Step 4. Lastly, add the following code to your custom_functions.php in the custom folder:

function custom_header() {
include (TEMPLATEPATH . ‘/custom/rotating_images.php‘);
}
remove_action(‘thesis_hook_header’, ‘thesis_default_header’);
add_action(‘thesis_hook_header’, ‘custom_header‘);

Again, the boldfaced texts are those you can change to whatever you want.

Hope it’s useful to your Thesis theme.