This post describes how to change the default headers in the Twenty Eleven theme and replace them with images of your choice. Throughout this post it is assumed that you’re working with a child theme – if not you may have to adjust some paths but the general procedure is the same. I have retained the original sizing of the Twenty Eleven images, namely: 1000 x 288px for the header images and 230 x 66px for the thumbnails. There are essentially 3 steps to switching out the default headers and replacing them with your own:

1. Create your own header images and thumbnails
2. Remove the default header images
3. Add your own header images

Step 1 – Create Your Own Images

1. All the usual caveats apply here regarding copyright on images you plan to use – make sure you either have it or have permission to use the images

2. Create a new image or resize an existing image to dimensions 1000 x 288px for the main header image

3. Using the image in step 2 above resize it to 230 x 66px for use as the thumbnail

4. Repeate steps 2 and 3 for the images you want to use as header images in your theme

This might take you a while depending on how many images you want to use, how complex you want to make them and how accomplished you are with your graphics program of choice (Photoshop etc). Once you’ve finished that side of it the rest is pretty quick as follows

Step 2 – Remove the Default Header Images

5. Out of the box the Twenty Eleven theme comes configured with 8 images named:

‘wheel’,'shore’,'trolley’,'pine-cone’,'chessboard’,'lanterns’,'willow’and ‘hanoi’.

You need to remove any of these that you don’t want. You can remove all of them or a subset. To do this add the following code snippet to your functions.php file in your child theme:

<?php
// REMOVE TWENTY ELEVEN DEFAULT HEADER IMAGES
function remove_header_images() {
    unregister_default_headers( array('wheel','shore','trolley','pine-cone','chessboard','lanterns','willow','hanoi')
    );
}
add_action( 'after_setup_theme', 'remove_header_images', 11 );
?>

In this code I’ve chosen to remove all of the default headers for completeness. If you wanted to retain some of them you you would just omit the file names of those you wanted to keep from the “unregister_default_headers” line.

I’ve called the function that does this work “remove_header_images” because that’s a reasonable description of what it does but you can call it anything you want. Just make sure that the name you give the function also appears in the “add_action” instruction at the end.

The parameter “11″ is worth noting. That sets the runtime priority of the action we’ve set up to remove the headers. The default priority is 10 so having a priority of 11 means runs after the default activities, ensuring that we allow the default header images to register and load before we try and remove them.

Step 3 – Add Your Own Header Images

6. Now that you’ve removed the default header images you can add your own. In your child theme folder create a folder to hold your images. I created a folder called “images” and use it to hold all the images for my child theme. You don’t have to do that, you can create as many folders in your child theme as you want and you can call them what you want it doesn’t matter, just make sure that in what follows the image paths point to the folder you choose to hold your header images.

7.Drop the header and thumbnail images you created way back in step 1 into the folder you created in step 7 above.

You should have a pair of images for every header image: 1 header + 1 thumbnail.

A quick note on image file naming conventions. I chose to adopt the following naming convention for my images:

headerimage_filename for the main header image and

headerimage_filename-thumbnail for the thumbnail image that appears in the setup panel

e.g. “aceofspades.jpg” for the main header image and “aceofspades-thumbnail.jpg” for the thumbnail.

That just made it easy for me to remember what was what. You of course, can choose your own approach or just follow mine.

8. With your images all in place add the following code snippet into your functions.php file:

<?php
//ADD NEW DEFAULT HEADER IMAGES
function new_header_images() {
    $child2011 = get_bloginfo('stylesheet_directory');
	define( 'HEADER_IMAGE', '/wp-content/themes/child2011/images/aceofspades.jpg' );
    register_default_headers( array (
        'image1' => array (
            'url' => "$child2011/images/aceofspades.jpg", // 1000 x 288px
            'thumbnail_url' => "$child2011/images/aceofspades-thumbnail.jpg", // 230 x 66px
            'description' => __( 'Ace of Spades', 'child2011' )
        ), // note the comma when using multiple images, you don't need this for the last image
        'image2' => array (
            'url' => "$child2011/images/band.jpg",
            'thumbnail_url' => "$child2011/images/band-thumbnail.jpg",
            'description' => __( 'Rock Band', 'child2011' )
        ),
        'image3' => array (
            'url' => "$child2011/images/batman.jpg",
            'thumbnail_url' => "$child2011/images/batman-thumbnail.jpg",
            'description' => __( 'Batman', 'child2011' )
        ),
        'image4' => array (
            'url' => "$child2011/images/beetleonflower.jpg",
            'thumbnail_url' => "$child2011/images/beetleonflower-thumbnail.jpg",
            'description' => __( 'Ladybird on Flower', 'child2011' )
        ),
        'image5' => array (
            'url' => "$child2011/images/darkangel.jpg",
            'thumbnail_url' => "$child2011/images/darkangel-thumbnail.jpg",
            'description' => __( 'Dark Angel', 'child2011' )
        ),
        'image6' => array (
            'url' => "$child2011/images/earth.jpg",
            'thumbnail_url' => "$child2011/images/earth-thumbnail.jpg",
            'description' => __( 'Home Sweet Home', 'child2011' )
        ),
        'image7' => array (
            'url' => "$child2011/images/eilidh.jpg",
            'thumbnail_url' => "$child2011/images/eilidh-thumbnail.jpg",
            'description' => __( 'Eilidh', 'child2011' )
        ),
        'image8' => array (
            'url' => "$child2011/images/einstein.jpg",
            'thumbnail_url' => "$child2011/images/einstein-thumbnail.jpg",
            'description' => __( 'Albert Einstein', 'child2011' )
        ),
        'image9' => array (
            'url' => "$child2011/images/figureonglass.jpg",
            'thumbnail_url' => "$child2011/images/figureonglass-thumbnail.jpg",
            'description' => __( 'Figure', 'child2011' )
        ),
        'image10' => array (
            'url' => "$child2011/images/flowers.jpg",
            'thumbnail_url' => "$child2011/images/flowers-thumbnail.jpg",
            'description' => __( 'Yellow Flowers', 'child2011' )
        ),
        'image11' => array (
            'url' => "$child2011/images/kites.jpg",
            'thumbnail_url' => "$child2011/images/kites-thumbnail.jpg",
            'description' => __( 'Passing Years', 'child2011' )
        ),
        'image12' => array (
            'url' => "$child2011/images/musicfreak.jpg",
            'thumbnail_url' => "$child2011/images/musicfreak-thumbnail.jpg",
            'description' => __( 'Music', 'child2011' )
        ),
        'image13' => array (
            'url' => "$child2011/images/redrain.jpg",
            'thumbnail_url' => "$child2011/images/redrain-thumbnail.jpg",
            'description' => __( 'Red Raindrops', 'child2011' )
        ),
        'image14' => array (
            'url' => "$child2011/images/unionflag.jpg",
            'thumbnail_url' => "$child2011/images/unionflag-thumbnail.jpg",
            'description' => __( 'Union Flag', 'child2011' )
        ) // the last image does not get a comma
    ));
}
add_action( 'after_setup_theme', 'new_header_images' );
?>

Notes:
(a) The function to add the new header images is called “new_header_images”. You can change this if you want though it’s a reasonable description of what it does. If you do change it, make sure you change the name in line 79 too.

(b) The variable $child2011 in line 4 is just a holder for the path information of your child theme. You can call it anything you want but if you change it make sure you also change it in the image paths from line 8 onwards. If you miss 1 of these you will spot it quickly enough because the relevant image/thumbnail wont appear.

(c) All image/thumbnail code blocks are separated by a comma except the last code block where there is no comma (see comments in the code snippet). This is important.

(d) The code in line 5 defines the default header image to be used if no other header image is set – courtesy of http://www.voodoopress.com

9. That’s it, you have now replaced the default Twenty Eleven theme header images with your own handmade images (including thumbnails). Here’s a snapshot of what my configuration panel looked like when I had finished:

If you’re interested in changing the sizes of the header images there’s a great tutorial over on http://www.voodoopress.com


Check out this post: http://voodoopress.com/customizing-twentyeleven-lets-start-with-width-and-smaller-header/