Adding Featured Image Headers to LightWord

Featured images are a marvelous tweak available in some WordPress themes that allow you to specify a different custom header image in each post/page. For instance, notice that the custom header at the top is different than the default headers we use here at Riverwind. Unfortunately, the LightWord theme we use does not natively support featured image headers. Here's how to fix that while still allowing LightWord to use its randomized (or not) default headers.

1) Before you begin, back up your theme files! This is very important!

2) Modify the LightWord Settings (in Appearance in your Dashboard) to enable custom header images, and set them to the correct width. I use the wider LightWave theme, so my images are 960px wide x 100px tall.

3) Create some custom header images. I recommend at least one default image and one feature image for initial testing.

4) Edit LightWave's Theme Functions (functions.php) file using either the built-in editor (in Appearance) or a third-party editor through FTP. Look for this code around line 475:

function lightword_header_image(){
global $lw_top_header_image, $lw_top_header_image_height, $lw_top_header_image_width, $top_header_image_path;

if($lw_top_header_image == "Enabled") { ?>

<a name="top" title="<?php bloginfo('name'); ?>" href="<?php if(function_exists('home_url')) echo home_url(); else bloginfo('url'); ?>"><span id="top" style="background:url('<?php header_image(); ?>') no-repeat;height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;width:<?php echo HEADER_IMAGE_WIDTH; ?>px"><strong><?php bloginfo('name'); ?></strong></span></a>

<?php }else{ ?>

<div id="top_cufon"><h1 id="logo"><a name="top" title="<?php bloginfo('name'); ?>" href="<?php if(function_exists('home_url')) echo home_url(); else bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> <small><?php bloginfo('description'); ?></small></h1></div>

<?php
    }
}

This code is invoked from the header.php file to write the header span or div to the correct location. What we need to do is to replace the default header image with our featured image when a featured image exists. To do this, replace the above code with this:

function lightword_header_image(){
global $lw_top_header_image, $lw_top_header_image_height, $lw_top_header_image_width, $top_header_image_path;

if($lw_top_header_image == "Enabled") { ?>

<a name="top" title="<?php bloginfo('name'); ?>" href="<?php if(function_exists('home_url')) echo home_url(); else bloginfo('url'); ?>"><span id="top" style="background:url('<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) && !(is_home()) ) { echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); } else { header_image(); } ?>') no-repeat;height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;width:<?php echo HEADER_IMAGE_WIDTH; ?>px"><strong><?php bloginfo('name'); ?></strong></span></a>

<?php }else{ ?>

<div id="top_cufon"><h1 id="logo"><a name="top" title="<?php bloginfo('name'); ?>" href="<?php if(function_exists('home_url')) echo home_url(); else bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> <small><?php bloginfo('description'); ?></small></h1></div>

<?php
    }
}

If you look closely at line 6, you can see where we've made the necessary change.

5) Edit the Single Post (single.php) and Main Index Templates (index.php) to remove the featured image from the body of your posts. You can leave them there if you want, but I don't see a point once you've decided to use the Featured Image to pimp out your header. Open each file and remove or comment out this line:

<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); } ?>