TwentyEleven With Easy Rotating Header Images

I have a secondary blog which I wanted to have some special header images. One nice thing about the new default WordPress theme, TwentyEleven, is that you can have a couple of header images and rotate them randomly. A bad thing about the new default WordPress theme is that it’s annoying adding new header images.

At first I got this post about adding your own images. One thing I did a bit different was the way I was generating thumbnails with the same name of the image, but in a different directory. Because of that, all I really needed was the image name. Thus, my wptis_new_default_header_images() turned into:

function wptips_new_default_header_images() {
    $dir = get_bloginfo('stylesheet_directory');
    $headers = array(
        'image1',
        'image2',
        'image3',
        'image4'
    );

    $images = array()
    foreach($headers as $filename) {
        $images[] = array(
            'url' => "$dir/images/$filename.jpg",
            'thumbnail_url' => "$dir/images/thumbs/$filename.jpg",
            'description' => __($filename, 'twentyelevenheaders')
        );
    }
    register_default_headers($images);
}

This way, when I needed to add a new header, all I had to do was upload it to the theme package (with the thumbnail) and edit the $headers array to add the new filename.

But that was a bit annoying ’cause, well, I had to create the thumbnail, upload both the image and the thumbnail and then edit the function again. That’s when it occurred to me that I could make a page, add a gallery to it and then make the theme load the images from that gallery. That way, I could use WordPress itself to upload the images and let it create the thumbnails. The result was this:

function wptips_new_default_header_images() {
	$child2011_dir = get_bloginfo('stylesheet_directory');
	$images = array();

	$page = get_page_by_title('The Headers');
	$attachments = get_children(
		array(
			'post_parent' => $page->ID,
			'post_type' => 'attachment',
			'orderby' => 'menu_order ASC, ID',
			'order' => 'DESC'
		) 
	);
	foreach($attachments as $id => $info) {
		$image_id = $info->ID;
		$url = wp_get_attachment_image_src($image_id, 'full');
		$thumb = wp_get_attachment_image_src($image_id, 'medium');
		$images[] = array(
			'url' => $url[0],
			'thumbnail_url' =>  $thumb[0],
			'description' => __($info->post_title, 'twentyelevenheaders')
		);
	}

    register_default_headers($images);
}

After that, I created a page named “The Headers” and uploaded all images I wanted (following the guildelines of 1000×288) and let WordPress take care of the rest, including saving them on the server and creating the thumbnail. The thumbnail is a bit larger than the normal size, but that’s not a big issue IMHO.

Anyway, if you’re interested, here is the theme. Install like any other WordPress theme, but you’ll need a page named “The Headers” for it to work (or create a page and change the name in the code).

One thought on “TwentyEleven With Easy Rotating Header Images

  1. We got easy rotating images on 2011 and i’m more excite as more years will come. I am looking forward for more updates about this fascinating header images.Keep posting.

Comments are closed.