WordPress 3.0 brought a host of new features with it and one was the ability to change your theme header from within the admin panel, under the “appearance” tab and was built into the TwentyTen theme. What if you want to add this functionality to your own theme ? Thankfully it’s pretty easy to do by adding some custom code to your theme’s functions.php file.
Add Code to Functions.php
Open or create a file called functions.php in your WordPress theme’s folder and paste the following code :
<?php
//Check see if the customisetheme_setup exists
if ( !function_exists('customisetheme_setup') ):
//Any theme customisations contained in this function
function customisetheme_setup() {
//Define default header image
define( 'HEADER_IMAGE', '%s/header/default.jpg' );
//Define the width and height of our header image
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'customisetheme_header_image_width', 960 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'customisetheme_header_image_height', 220 ) );
//Turn off text inside the header image
define( 'NO_HEADER_TEXT', true );
//Don't forget this, it adds the functionality to the admin menu
add_custom_image_header( '', 'customisetheme_admin_header_style' );
//Set some custom header images, add as many as you like
//%s is a placeholder for your theme directory
$customHeaders = array (
//Image 1
'perfectbeach' => array (
'url' => '%s/header/default.jpg',
'thumbnail_url' => '%s/header/thumbnails/pb-thumbnail.jpg',
'description' => __( 'Perfect Beach', 'customisetheme' )
),
//Image 2
'tiger' => array (
'url' => '%s/header/tiger.jpg',
'thumbnail_url' => '%s/header/thumbnails/tiger-thumbnail.jpg',
'description' => __( 'Tiger', 'customisetheme' )
),
//Image 3
'lunar' => array (
'url' => '%s/header/lunar.jpg',
'thumbnail_url' => '%s/header/thumbnails/lunar-thumbnail.jpg',
'description' => __( 'Lunar', 'customisetheme' )
)
);
//Register the images with WordPress
register_default_headers($customHeaders);
}
endif;
if ( ! function_exists( 'customisetheme_admin_header_style' ) ) :
//Function fired and inline styles added to the admin panel
//Customise as required
function customisetheme_admin_header_style() {
?>
<style type="text/css">
#wpbody-content #headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
border: 1px solid #333;
}
</style>
<?php
}
endif;
//Execute our custom theme functionality
add_action( 'after_setup_theme', 'customisetheme_setup' );
?>
- Default.jpg is the default image header file so rename that if you wish
- 960 is the default width of the image
- 220 is the default height of the image
Once you have have added this code and activated your theme, you will see the new menu option under “Appearance” called “Header” – this is where you can upload and choose which header file to use.
Place the Image in your Theme
The final step is to place code in your theme that will show the chosen image, the following code will probably go in your header.php file :
<div id="header">
<!-- other header code here.... -->
<!-- This line adds the header to the theme -->
<img id="headerimg" src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="Header image alt text" />
</div>
And there you have it – an easy way to include this new functionality in your WordPress themes. Thanks to Nooshu for this code.
9