Include Custom Headers in Twenty Ten Child Theme

I made a post shortly after WordPress 3.0 was released on what I was able to do with twenty Ten child themes. One thing I did do was add my own header images to my child theme, but I never explain how it was done.

When creating a child theme for Twenty ten, you might want to have your own headers displayed in the admin section instead of the default ones, this isn’t hard to do.

First I’ll assume you already have your child theme folder created and know the basics on creating a child theme for Twenty Ten, if you don’t, then a good tutorial can be found on Aaron Jorbin’s site.

Create a file and name it functions.php and open it in your favorite text editor. All of the files in Twenty Ten can be overridden, so we’ll create our own functions file and add code we want to override the defaults.

Open your functions.php file and past the following code into it.

<?php

function YOUR_THEME_setup(){

/* Add additional default headers here. Change "YOUR_THEME" to the name of your theme throughout this page, change "image_name_1, image_name_2, image_name_3" to the name of your images. */
    $YOUR_THEME_dir =    get_bloginfo('stylesheet_directory');
    register_default_headers( array (
        'image_name_1' => array (
            'url' => "$YOUR_THEME_dir/images/image_name_1.jpg",
            'thumbnail_url' => "$YOUR_THEME/images/image_name_1.jpg",
            'description' => __( 'image_name_1', 'YOUR_THEME' )
        ),
        'image_name_2' => array (
            'url' => "$YOUR_THEME/images/image_name_2.jpg",
            'thumbnail_url' => "$YOUR_THEME/images/image_name_2.jpg",
            'description' => __( 'image_name_2', 'YOUR_THEME' )
        ),
        'image_name_3' => array (
            'url' => "$YOUR_THEME/images/image_name_3.jpg",
            'thumbnail_url' => "$YOUR_THEME/images/image_name_3.jpg",
            'description' => __( 'image_name_3', 'YOUR_THEME' )
        )

    ));

}

What this does is add the new headers, header thumbnails and sets a name for each image displayed in the admin section so you can have your own personalized header options for your child theme. You will need to change a few things to reflect your theme. Change “YOUR_THEME” to the name of your child theme.

Next you will need to upload your header images to /images in your child theme folder, each image should be 940 × 198 pixels, you will also need to upload thumbnails of your headers which will be displayed in the admin. Each thumbnail should be 230 x 48 pixels, try renaming them to something that related to the larger header image such as blue-header.jpg –> blue_header_thumb.jpg.

Once all that is done save your functions.php and upload it to your child theme folder and take a look at appearance>headers in the admin section, you should see the headers you’ve added.

The default Twenty Ten headers look great, but you might not want to include them with your child theme, so next we’ll add code to remove them.
Open your functions.php file again and add the following code to the bottom.

function YOUR_THEME_remove_twenty_ten_headers(){
    unregister_default_headers( array(
        'berries',
        'cherryblossom',
        'concave',
        'fern',
        'forestfloor',
        'inkwell',
        'path' ,
        'sunset')
    );
}

add_action( 'after_setup_theme', 'YOUR_THEME_remove_twenty_ten_headers', 11 );

add_action( 'after_setup_theme', 'YOUR_THEME_setup' );

This bit of code will unregister the default Twenty Ten headers and only display your own. Again you will need to edit this code slightly to reflect your theme, change “YOUR_THEME” to your child theme name, save and upload to your theme directory and refresh your admin section.

If all went well, you should only see your headers in the admin, test each one out to make sure they work.

Twenty Ten header

I’ve zipped a test child theme with the functions.php file for you to use with header images already set up if you want to try it out. Just upload it to wp-content/themes and activate it as a normal theme, you must have Twenty Ten theme installed for it to work.
Download from the downloads page (link at top)

Code was taken from Aaron Jorbin’s Introducing Thirty Ten tutorial and header images were created by Rudi Lehner from his image gallery

Bookmark and Share

Related Posts

About Zeaks

I'm Canadian eh - Add me to Twitter @ZeaksBlog
Permalink

6 Responses to Include Custom Headers in Twenty Ten Child Theme

  1. Pingback: Twenty Ten Child Themes | Zeaks Blog

  2. alex says:

    Hi,

    thank you for this tutorial, but i have a question (iam pretty new to wordpress):
    I have managed to see the custom headers in my admin setup, but after choosing one and saving it, nothing happens at the frontend…
    Do you have a clue which part could be missing?

    cheers,
    Alex

    ReplyReply
  3. Zeaks says:

    Try clicking “remove header image” then saving it, then select a new header. I had to do that the first time for some reason as well.

    ReplyReply
  4. alex says:

    didnt work ./

    ReplyReply
  5. Zeaks says:

    Does it display a header at all on the front page? If not, right click on where the header should be and if using firefox goto “view image” see where it’s looking for the header at. There is also a sample for this in the downloads section, are you using that or adding the code yourself?

    ReplyReply
  6. Blog Online says:

    This is my websites
    Many thanks for posting. You almost certainly have a lot of visitors.

    ReplyReply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>