Tag Archives: Header

Two New Articles! Rotating Header Images and Upgrading Thesis

Today we continue to fill out our offering to you, gentle reader, with two great new articles:

Tutorial: Rotating Header Images” is found in the Tricks > Headers section. Rotating headers were a feature of Chris Pearson’s Cutline and Neoclassical themes. And now you can have them in Thesis! This easy-to-follow guide will have you up in no time. See them in action at my Thesis Demo site.

The latest addition to the Tips section is the detailed guide, “Upgrading Thesis.” Installing a Thesis upgrade can be a terrifying prospect for those of us who are less experienced. This article is the answer! Liberally sprinkled with illustrations, it takes you step-by-step through the Thesis upgrade process.

On tap are even more articles for you, such as how to install WordPress and tools for color schemes. Don’t turn that dial!

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>
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.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!