I’ve recently noticed that a lot of WordPress users are using the new modern theme that comes default with every installation. This doesn’t surprise me, the theme is quite nice. It offers a good layout and plenty of customization, the most notable of which is the blog header image. Being part designer (and part elitist) I have made some changes to the template and I am proud of the customization I have made for my blog. However, the changes are rather subtle, especially to visitors that don’t visit my site regularly (which I assume is everyone but myself.) Anyway I finally decided to open source my procedure for anyone else who might be interested in doing something similar.

When I first decided to use the new WordPress theme I knew I wanted to connect the header image on the blog to my flickr feed, so that the image would always update to my latest upload. This turned out to be relatively easy, and here is what I did:

The first thing I did was duplicate the theme folder on the web server. I called it twentyten-mod, and also changed the template info in style.css to indicate that the theme had been modified.

Next I hunted down phpFlickr, which is a set of PHP functions that interact with the Flickr API. This saved a lot of time and allowed me to quickly access the images that I needed. I added the phpflickr.php file to the twentyten-mod directory.

Now, I needed to modify the header.php file. The code I changed began at line 66, which originally looked like this:

 <div id="site-description"><?php bloginfo( 'description' ); ?></div>

<?php
	// Check if this is a post or page, if it has a thumbnail, and if it's a big one
	if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
			has_post_thumbnail( $post->ID ) &&
			( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
			$image[1] >= HEADER_IMAGE_WIDTH ) :
		// Houston, we have a new header image!
		echo get_the_post_thumbnail( $post->ID );
	elseif ( get_header_image() ) : ?>
		<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
	<?php endif; ?>
</div><!-- #branding --> 

I commented out the entire section of PHP and added a couple divs. (I could have erased everything, but I felt it was better to be able to fall back on the default as easily as possible.) The first I called “PhilBanner” (for lack of a better name) and the second I called “PhilCredit”. (This naming scheme is only partially vane, I also wanted a unique handle which WordPress didn’t already use so I didn’t run into any trouble with my styling.)

I inserted the needed phpFlickr code to grab the large image size of the latest upload, and also cache the image. I discovered that grabbing the new image slowed down the page load time significantly, so the cache was a necessity.

The code also grabbed the image name, and the image page url, which allowed me to put a text link to the image in the bottom corner.

Now line 66 and following looked as such:

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

<?php
	// Check if this is a post or page, if it has a thumbnail, and if it's a big one
	//if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
	//has_post_thumbnail( $post->ID ) &&
	//( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
	//$image[1] >= HEADER_IMAGE_WIDTH ) :
	//Houston, we have a new header image!
	//echo get_the_post_thumbnail( $post->ID );
	//elseif ( get_header_image() ) : ?>
	<!--<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />-->
	<?php //endif; ?>
					
	<div id="PhilBanner">
		<?php
		require_once("phpFlickr.php");
		$f = new phpFlickr("SECRET KEY");
		$f->enableCache("fs", "cacheflickr/", 4800);
		// Get the friendly URL of my photos
		$photos_url = $f->urls_getUserPhotos("70686858@N00");
		// Get my first public photo
		$photos = $f->people_getPublicPhotos("70686858@N00", NULL, NULL, 1);
		// Loop through the photos and output the html
		foreach ((array)$photos['photos']['photo'] as $photo) {
		echo "<img alt='$photo[title]' src='" . $f->buildPhotoURL($photo, "large") . "' width='940px' height='*' border='0' />";
		echo "<div id='PhilCredit'><a href=$photos_url$photo[id]>$photo[title]</a> by <a href='http://flickr.com/photos/landofchaos/'>MrBobDobolina</a></div>";
		}
		?>
						
		</div>
	</div><!-- #branding -->

The final step is now to add the stylesheet info to the new banner div. (This step actually came first when I was designing everything the first time, but in order to streamline everything, I’m listing it last.)

In adding my divs, I wanted the image to always display toward the center, so the image itself is cropped and centered via css. This cropping usually makes for some interesting and potentially awkward header images, but it also cuts down on potential processing time if I were to actually modify the images after grabbing them.

I also had to specifically list attributes for the image credit links, since they would not follow normal link color options. You’ll also notice I duplicated the #branding img div attributes. I left the original in place, but actually made a second copy with the attributes I needed at the end of the stylesheet. This made it easy for me to find all my changes if/when I ever needed to apply the changes to an updated template.

/*Personal Additions*/
/*fixing the branding box */
#branding img  {
	clear: both;
	border-top: 4px solid #000;
	display: block;
	border-bottom: 1px solid #000;
	overflow: hidden;
	position: relative;
	bottom: 50%;
	background-color: #000;
}
/*adding personal branding box*/
#PhilBanner {
	background-color: #000;
	height: 198px;
	width: 940px;
	border-top: 4px solid #000;
	border-bottom: 1px solid #000;
	overflow: hidden;
	position: relative;
	clear: both;
}
/*inserting the photo credit and link*/
#PhilCredit{
	position: absolute;
	float: right;
	z-index: 1;
	color: #eee;
	background: #111;
	opacity:.80;
	right: 0px;
	bottom: 0px;
	padding-top: 7px;
	padding-bottom: 5px;
	padding-left:35px;
	padding-right:35px;
}
#PhilCredit a, #PhilCredit a:visited, #PhilCredit a:active{
	color: #fff;
	text-decoration: none;
	opacity: 1;
}
#PhilCredit a:hover{
	color: #fff;
	text-decoration: underline;
	opacity: 1;
}
/*adjust text */
#site-description {
	text-align: right;
	width: 350px;	
}
#site-title {
	float: left;
	margin: 0 0 18px 0;
	width: 575px;
	font-size: 38px;
	line-height: 36px;
}

And with that, everything was done! With every new flickr upload my blog would have a new header image.

Ideally, I think I would have liked to turn this into a WordPress Plugin, but I wasn’t sure if a plugin would be capable of this feature, and I didn’t have the time or energy to dive into plugin making. Besides, if I made it too easy, everyone would do it.