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.
