Tired of your old header? Want to switch it for something fresh and new? WordPress 3.0 makes it easy. You just need to make a few changes to your functions.php and header.php files, and then you can switch headers as often as you want.
You’ll need FTP access to your site’s theme files (you can do some of this in the Appearance Editor, but it’s easiest if you can upload and download as necessary). You’ll also need to know the height, width, and location of your current or desired header, and you’ll need an image or graphic to use for your new header.
First, we need to set up the function that will define the size of the header image and activate the Headers link in the Appearance menu of your admin screen. Open your functions.php file and paste the following:
define( 'HEADER_IMAGE', '%s/images/header.png' ); // The default header located in themes folder
define( 'HEADER_IMAGE_WIDTH', apply_filters( '', 845 ) ); // Width of header
define( 'HEADER_IMAGE_HEIGHT', apply_filters( '', 365 ) ); // Height of header
define( 'NO_HEADER_TEXT', true );
add_custom_image_header( '', 'admin_header_style' ); // This Enables the Appearance > Header
// Following Code is for Styling the Admin Side
if ( ! function_exists( 'admin_header_style' ) ) :
function admin_header_style() {
?>
<style type="text/css">
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
endif;
Make sure you change the dimensions to match the size of the header on your actual site. Note that you will also need to upload a default header to your theme’s image directory (if you wish to use your existing header as the default, make sure you change the Header Image name in the function).
Next, you need to display the new header on your site. In your header.php file, add the following:
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="Header Image" />
Change the alt text to reflect your image or site.
Log in to your WordPress admin screen and click “Appearance.” You will now see a link called Header. Click that to access your Custom Header section. You’ll see your default or current header as well as instructions for uploading a new one. You can also revert to your default header or eliminate your header altogether (note that there is no undo for those options, so choose carefully).
To upload a new header, browse for the image or graphic that you want to use (make sure it is at least as wide and high as your specified header dimensions) and click ‘Upload.’ If you need to crop your image, you can do so in the next step. Move the bounding box around until you are happy with the new header image and click Crop & Save.
That’s it! Your new header image will appear on your site, and you can switch it out as frequently as you like.
Questions? Problems? Leave a comment and we’ll do our best to help you out.
