Custom Header Image in WordPress 3.4

Posted: June 15, 2012

One of the new features in WordPress 3.4 is that you can add images to the header of your site through the Admin area. This is a feature that should have been added many versions ago and has always required a plugin or use of Custom Fields.

Adding the functionality to your WordPress site will add a sub menu under Appearance called Header. Here you will be able to:

1. Choose an image to upload.
2. Choose an image currently in your Media Library.
3. Choose an image that you have previously used as a header image.

To add functionality for Custom Header Images, add the following bit of code to your functions.php file:

// Custom Header Image
$args = array(
'flex-width'    =>; true,
'width'         =>; 980,
'flex-height'    =>; true,
'height'        =>; 300,
'default-image' =>; get_template_directory_uri() . '/images/default-header.jpg',
'uploads'       =>; true,
);
add_theme_support( 'custom-header', $args );

In your theme file where your header image is displayed (probably header.php), replace the image code with the following:

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />

The above example allows for flexible dimensions. If you want to set the width and height to a fixed number, simply remove the flex-width and flex-height from the array in functions.php and width and height from your image tag.

For more information on this feature and additional parameters, visit the Custom Headers docs.

Tags: custom header image, custom photo, functions.php, wordpress, wordpress 3.4
Posted in Code, Wordpress