Adding Additional Default Headers to the WordPress Twenty Ten Theme
The Twenty Ten theme comes with eight default headers. Any default header that you set is replaced with the “featured image” of a post. You can only see the new header when viewing that post. In this week’s WordPress Quick Tip we’ll see how simple it is to add additional headers to the Header’s Panel.
Watch the Screencast
Functions.php
Open up the functions.php file of the Twenty Ten theme. Locate the following section:
// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
What follows is an array listing the current default headers and their location. To add your own, add a comma after the last parenthesis of the array of sunset header. Here’s an example of what it can look like after adding two more headers:
register_default_headers( array(
‘berries’ => array(
‘url’ => ‘%s/images/headers/berries.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/berries-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Berries’, ‘twentyten’ )
),
‘cherryblossom’ => array(
‘url’ => ‘%s/images/headers/cherryblossoms.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/cherryblossoms-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Cherry Blossoms’, ‘twentyten’ )
),
‘concave’ => array(
‘url’ => ‘%s/images/headers/concave.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/concave-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Concave’, ‘twentyten’ )
),
‘fern’ => array(
‘url’ => ‘%s/images/headers/fern.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/fern-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Fern’, ‘twentyten’ )
),
‘forestfloor’ => array(
‘url’ => ‘%s/images/headers/forestfloor.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/forestfloor-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Forest Floor’, ‘twentyten’ )
),
‘inkwell’ => array(
‘url’ => ‘%s/images/headers/inkwell.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/inkwell-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Inkwell’, ‘twentyten’ )
),
‘path’ => array(
‘url’ => ‘%s/images/headers/path.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/path-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Path’, ‘twentyten’ )
),
‘sunset’ => array(
‘url’ => ‘%s/images/headers/sunset.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/sunset-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Sunset’, ‘twentyten’ )
),
‘waterfall’ => array(
‘url’ => ‘%s/images/headers/waterfall.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/waterfall-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Waterfall’, ‘twentyten’ )
),
‘mountain’ => array(
‘url’ => ‘%s/images/headers/mountain.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/mountain-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Mountain’, ‘twentyten’ )
)
) );
Lets dissect the code a little bit.
register_default_headers : This is the function that creates and displays our default headers. It accepts an array of parameters.
name: Sets a value with our headers name. We can then set an array of additional values and keys.
url: Relative path to the header image. Notice that the current path is /images/headers/image_name.jpg
thumbnail_url: Relative path to a thumbnail of the header image. Current path is /images/headers/image_name-thumbnail.jpg
description: A description of the image. This would be display upon hovering over the image inside the Headers Panel.
Things to Note
The Twenty Ten header is 940×198, anything bigger than that would be resized; anything smaller would be stretch to fit those dimensions. The thumbnail images can be set to any dimensions, 230×48 is the default. The images can only be .jpg or they will be ignored and won’t be displayed.
Comments
9 Responses to “Adding Additional Default Headers to the WordPress Twenty Ten Theme”Share Your Opinions
Tell us what you're thinking...
and if you want a pic to show with your comment, then get gravatar!
Please make sure that you have read our Comment Policy.
Simple enough for beginner like me.
Textmate is awesome btw!
how do we change the size of the Twenty Ten header from 940×198 to something else?
By creating a child theme that modifies the styling of a Twenty Ten theme.
i would like to modify the twenty-ten theme itself. where can i do this without creating a child theme? thx
You can modify the actual theme by editing the theme files located in your wp-content/themes/ directory. To add more images to your main twenty theme, then follow the guidelines in this article.
Excellent post I was wondering how to get my own defualt set of header images to load on the back end.
It’s a shame that when you upload a new header it doesn’t add it to the default set. It does add it to the media library but then they don’t give you a way of navigating to those images you have already uploaded… strange. I can’t complain too much though because Twenty Ten is an amazing theme far better than Kubrick ever was.
Anyway thanks for the workaround!
Great post!
Easy to do, but hard to find other tutorials on the subject. Thanks for that!
Thanks so much for this great post, the information is really clear and well presented. I do have one question though …
‘%s’ – my childtheme still references the images from the parent twenty ten image directory. I’ve made various attempts in functions.php to try and get my child theme to ref it’s own childtheme/images/headers/ files but to no avail. I’m relatively new to both wordpress and php, if you have any pointers they’d be much appreciated.
You can add your theme directory hook like you would in header.php file.