Dress Your WordPress

So WordPress 3.0 has this nice feature which makes it possible to define the header image in the admin area. And if you upload a featured image on a post or page that is big enough then that Image can be used as the header image.
Today I’m going to show you how to change your theme to add this feature.
So lets start as always with the function.php file
Add the following to it

<?php
/** Tell WordPress to run yourtheme_setup() when the 'after_setup_theme' hook is run. */
add_action( 'after_setup_theme', 'yourtheme_setup' );
if ( ! function_exists('yourtheme_setup') ):
/**
* @uses add_custom_image_header() To add support for a custom header.
* @uses register_default_headers() To register the default custom header images provided with the theme.
*
* @since 3.0.0
*/
function yourtheme_setup() {
// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );
// Your changeable header business starts here
define( 'HEADER_TEXTCOLOR', '' );
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/forestfloor.jpg' );
// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to yourtheme_header_image_width and yourtheme_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 960 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height', 198 ) );
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 940 pixels wide by 198 pixels tall (larger images will be auto-cropped to fit).
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
// Don't support text inside the header image.
define( 'NO_HEADER_TEXT', true );
// Add a way for the custom header to be styled in the admin panel that controls
// custom headers. See yourtheme_admin_header_style(), below.
add_custom_image_header( '', 'yourtheme_admin_header_style' );
// … and thus ends the changeable header business.
// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array (
'berries' => array (
'url' => '%s/images/headers/berries.jpg',
'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
'description' => __( 'Berries', 'yourtheme' )
),
'cherryblossom' => array (
'url' => '%s/images/headers/cherryblossoms.jpg',
'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
'description' => __( 'Cherry Blossoms', 'yourtheme' )
),
'concave' => array (
'url' => '%s/images/headers/concave.jpg',
'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg',
'description' => __( 'Concave', 'yourtheme' )
),
'fern' => array (
'url' => '%s/images/headers/fern.jpg',
'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg',
'description' => __( 'Fern', 'yourtheme' )
),
'forestfloor' => array (
'url' => '%s/images/headers/forestfloor.jpg',
'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg',
'description' => __( 'Forest Floor', 'yourtheme' )
),
'inkwell' => array (
'url' => '%s/images/headers/inkwell.jpg',
'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg',
'description' => __( 'Inkwell', 'yourtheme' )
),
'path' => array (
'url' => '%s/images/headers/path.jpg',
'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg',
'description' => __( 'Path', 'yourtheme' )
),
'sunset' => array (
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
'description' => __( 'Sunset', 'yourtheme' )
)
) );
}
endif;
if ( ! function_exists( 'yourtheme_admin_header_style' ) ) :
/**
* Styles the header image displayed on the Appearance > Header admin panel.
*
* Referenced via add_custom_image_header() in yourtheme_setup().
*
* @since 3.0.0
*/
function yourtheme_admin_header_style() {
?>
<style type="text/css">
/* Shows the same border as on front end */
#headimg {
	border-bottom: 1px solid #000;
	border-top: 4px solid #000;
}
.namehide {text-indent:-9000px;}
/* If NO_HEADER_TEXT is false, you would style the text with these selectors:
	#headimg #name { }
	#headimg #desc { }
 
*/
</style>
<?php
}
endif;
?>

A quick explanation what all this does:
• You start the code out by creating a function yourtheme_setup().
• In line 21, we define the default header image. Note there is a variable %s which is basically a placeholder for the theme directory URI.
• Line 25 and 26 is where you define the image width and height. By default it is set to 960px wide and 198px high. You can change it by editing those two lines.
• Starting from line 42, we start registering the default headers. These are the images that will show up as a radio button option in your admin panel. If you need more options then simply follow the format being used.
• In line 95, we choose the header styling. You do not need to change these settings because you already defined them in Line 25 and 26.
You can download the images here. Simply place them in a folder headers in your image folder. You can always use your own images as well.
Save your functions.php file and open your header.php file.
Place the following code where you want your header to appear and style it up like you want.

<div id="sitename">
				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
 
				<<?php echo $heading_tag; ?> id="logo" >
					<span>
						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() &&
							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, 'post-thumbnail' );
						<span class="namehide"><?php bloginfo( 'name' );?></span>
					elseif (get_header_image())  : ?>
						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /><span class="namehide"><?php bloginfo( 'name' );?></span>
					<?php else:  bloginfo( 'name' ); endif; ?></a>
					</span>
				</<?php echo $heading_tag; ?>>
 
 
 
 
			<p id="tagline"><?php bloginfo( 'description' ) ?></p>
</div>

What does this do?
• First, it is checking if it is the home page, if it is a H1 tag is assigned.
• then, it checks if it is a single post or a page. It also checks if this post/page has a thumbnail, and whether it is big enough.
• If the page is a single page and has a big enough thumbnail, then it displays the post thumbnail specific for that post.
• If it is not a single page, or the post thumbnail is not big enough, then it will show the default header.
• If no header is assigned the site name is displayed.
I hope this tutorial was helpful. If you have any questions, then feel free to ask in the comments.

3 thoughts on “WordPress 3.0 header images”

Frederic Ch. Reuter says:

March 31, 2011 at 5:09 pm

Nice explaination!

If id like to use those separated Header by Article-Images, but added some specials for a category-specified image…

…for example, like this: elseif (is_category(’16′)

…where and how do i solve it – under the normal handling wich worked before?

Any Idea for a nice, clean solution?
If i’m right, we started (on a normal TwentyTen Template) in header.php after “//Houston, we have…” and then?

Hi Thanks,

Have a try with this:

<div id="sitename">
				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
 
				<<?php echo $heading_tag; ?> id="logo" >
					<span>
						<a href="<?php echo home_url( '/' ); ? rel="nofollow">" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php
	// check category				
if (is_category('15') || in_category('15') ) {
echo '<img src="' . get_bloginfo('template_directory') . '/images/cat15.jpg"  />';
} 
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
else 	if ( is_singular() && 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, 'post-thumbnail' );
						<span class="namehide"><?php bloginfo( 'name' );?></span>
					elseif (get_header_image())  : ?>
						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /><span class="namehide"><?php bloginfo( 'name' );?></span>
					<?php else:  bloginfo( 'name' ); endif; ?></a>
					</span>
				</<?php echo $heading_tag; ?>>
 
 
 
 
			<p id="tagline"><?php bloginfo( 'description' ) ?></p>
</div>

You can also try this plugin: http://wordpress.org/extend/plugins/twentyten-advanced-headers/

Your WordPress Specialist

WordPress 3.0 header images

Related Posts

Add YouTube channel to post

Add a theme options page to your theme.

Get the First Image

3 thoughts on “WordPress 3.0 header images”

Leave a Reply Cancel reply