Add WordPress header image to Thematic child theme

How do I spruce up my WordPress blog with a clickable header image when I’m using the Thematic theme framework?  In answering that question, I’ve cobbled together guidance from a variety of websites and documentation sources.  Here’s what I’ve learned…

I have some specific goals for my header image implementation.  I want to:

1. Add a header image that is separate from my blog title and blog description
2. Assign a URL of my choice to the header image
3. Enable the header image to be positioned via CSS
4. Enable the header image to be easily updated without changes to code
5. Minimize custom PHP code by leveraging built-in capabilities of WordPress
6. Do all of this from a Thematic child theme (i.e. if practical, confine changes to functions.php and style.css)

When I’m done, I want my blog header to look like this:

Step 1: Display a WordPress header image

WordPress has supported the Custom Header feature since version 2.1.  A custom header “is an image that is chosen as the representative image in the theme top header section.”  My issue is that I’m using Thematic framework version 1.0.3.2 as my parent theme and it does not, by default, implement a WordPress custom header.

To remedy this, I first create a header image and use an ftp utility to upload it to my child theme folder.  I place this image (msdnbug.png)…

…in the “thirdblogfromthesun.com/wp-content/themes/thirdblog/images” folder.  “thirdblogfromthesun.com” is my host name and “ThirdBlog” is the name of my child theme:

Second, I add the following code to my functions.php file:

// Initialize the WordPress custom header
// This function assumes I've placed the image 'msdnbug.png' in the 'images' directory of my child theme folder
// The default image can be easily replaced from the "Header" admin page
function thirdblog_custom_header_setup() {
  $default = array(
    'width'         => 78,
    'height'        => 34,
    'default-image' => get_stylesheet_directory_uri() . '/images/msdnbug.png',
    'uploads'       => true,
  );
  add_theme_support( 'custom-header', $default );
}
add_action( 'after_setup_theme', 'thirdblog_custom_header_setup' );

// Display an image in the custom header
// This function displays the currently selected image (specified in the "Header" admin page)
// The image is placed in the 'header-image' div so it can be easily manipulated in CSS
function display_my_image() {
  $header_image = get_header_image();
    if ( ! empty( $header_image ) ) { ?>
      <div id="header-image">
        <a href="http://msdn.microsoft.com/" title="Microsoft Developer Network">
          <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
        </a>
      </div>
    <?php }
}
// Action position numbers documented at: http://themeshaper.com/thematic/guide/?page_id=10
// Use position 2 to place image between brandingopen and blogtitle
add_action('thematic_header', 'display_my_image', 2);

The function thirdblog_custom_header_setup() initializes the Custom Header capability of WordPress and activates the Header admin page.  However, it does not display a header image.  To do that, I need the display_my_image() function.

Once I’ve completed these changes, my header looks like this:

Step 2: Position my WordPress header image

I’m really close now but I want to reposition my header image using CSS.  I  add the following lines to my style.css file:

/* Position the custom header image to the left of the blog title */
#header-image {
   width: 80px;
   float: left;
}

/* Indent the blog title slightly */
#blog-title a {
   margin-left: 10px;
}

These CSS changes place my #header-image side-by-side and to the left of my #blog-title:

Note that – between the various Thematic hooks, the supported action positions and standard CSS positioning – I could have placed this image almost anywhere in the header.  Clicking on the image sends me to the MSDN site.  Clicking on the blog title sends me to my blog home page.  Voila!  I’ve achieved all of my header image goals.