Remove the default header images from a Twentyeleven child theme

Recently we looked at adding a sidebar to twentyeleven via a child theme. While adding functionality is likely where you will start in your theme customization, there will likely come a point that you will want to remove some specific functionality as well.

One of the most eye catching features of twentyeleven are it’s header images, but if you really want to make the theme your own, you may want to remove the stock header images in favor of your own. Today we will do just that as we continue to explore customizing twentyeleven via a child theme.

First, let’s see how twentyeleven loads it’s header images. Here is a portion of twentyeleven’s functions.php, abbreviated for brevity.

add_action( 'after_setup_theme', 'twentyeleven_setup' );

if ( ! function_exists( 'twentyeleven_setup' ) ):
...
function twentyeleven_setup() {
...
    register_default_headers( array(
        'wheel' => array(
            'url' => '%s/images/headers/wheel.jpg',
            'thumbnail_url' => '%s/images/headers/wheel-thumbnail.jpg',
            /* translators: header image description */
            'description' => __( 'Wheel', 'twentyeleven' )
        ),
...
    ) );
}
endif; // twentyeleven_setup

By looking at this, we know the headers are loaded with register_default_headers, in the twentyeleven_setup function, which is had been added to the after_theme_setup hook via add_action.

Since the twentyeleven_setup() function has other goodies we want to keep, rather than rewrite the entire function, we create our own function to unregister_default_headers, and add it to the same after_theme_setup hook with a higher priority (the default is 10) so it will run after than the parent function.

Here we edit (or create) our child theme’s functions.php

<?php
function remove_default_headers() {
        unregister_default_headers(
                array(
                        'wheel',
                        'shore',
                        'trolley',
                        'pine-cone',
                        'chessboard',
                        'lanterns',
                        'willow',
                        'hanoi'
                )
        );
}

add_action( 'after_setup_theme', 'remove_default_headers', 11 );
?>

Note: If you are uncertain of which action is best to hook into, you should refer to the Plugin API/Action Reference at the WordPress Codex.

Now, when you browse the header section in the dashboard, you should be greeted with the following

Now that all of the default headers are gone, we can edit our child theme’s functions.php to add our own header. In this example, we’ve copied our header and a thumbnail, into images/headers under the child theme’s directory.
i.e.
twentyeleven-child/images/headers/header.jpg
and
twentyeleven-child/images/headers/header-thumbnail.jpg

<?php
function remove_default_headers() {
    unregister_default_headers(
        array(
            'wheel',
            'shore',
            'trolley',
            'pine-cone',
            'chessboard',
            'lanterns',
            'willow',
            'hanoi'
        )
    );
    register_default_headers( array(
        'tgcheader' => array(
            'url' => get_stylesheet_directory_uri() . '/images/headers/header.jpg',
            'thumbnail_url' => get_stylesheet_directory_uri() . '/images/headers/header-thumbnail.jpg',
            /* translators: header image description */
            'description' => __( 'tgcheader', 'twentyeleven-child' )
        )
    ) );
}

add_action( 'after_setup_theme', 'remove_default_headers', 11 );
?>

You should also note how we’re using get_stylesheet_directory_uri() to refer to our child theme’s path, instead of %s, which would reference the parent theme’s path.