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

Comments are in

Finally, posting comments works. They don’t look good, but I guess it is a better way to give feedback about the current layout. I’m still thinking how to make it look good (as I finally managed to make the display of the current comments work fine.)

Any suggestions are (still) welcomed.

Edit 1: Headings still need work, I know.

View comments are in and they are ugly

I just managed to add the code to display the comment but not to add comments yet. The reason is that they comments look ugly right now and I don’t have any ideas on how to fix it.

Why they are ugly? Well, WordPress comment_text() function likes to add paragraphs (the <p> tag) around the comment. If I do a multi-line string (like it is today), the quotes end far away from the text, not to mention that it makes navigation confusing, as it is also a multi-line string. If there was a way to turn everything into a comment, it would be cool, but there are line breaks and it would really look weird (although on small screens the comments would break anyway and the browser would not add the hash in front of every line), not to mention that paragraph problem…

Still trying to figure out a good solution for comments before letting more to be added…

Theme updates

In case you didn’t noticed: I merged all links into a single “class” and single posts now have links to previous and next posts/functions.
Also, behind the scenes, I paved the way to finally displaying comments. I’m almost there, I promise. Then, headings and then RELEASE! :)

“I

In case you don’t look at this blog directly (i.e., through RSS): I just put my new WordPress theme “I <3 Python” as default theme for the page. I know that comments are not being displayed and I’ll fix it as soon as possible.

Take a look and send your opinions (you need to send me an email — remember: comments are not working). Suggestions for improvements are also welcome.

Edit 1: Headings are also not working (well, they are, but they are changing the font size). You can check it on the Meta Personal FAQ page.

Giving Wordy a spin

So, finally, I decided to put Wordy as default theme. So far, I’m kinda pleased with it. I still have some things to fix but, so far, I’m think it will be the most awesome theme for WordPress EVER!