Latest Tech and Tips

Adding Additional Default Headers to the WordPress Twenty Ten Theme

0

The Twenty Ten theme comes with eight default headers. Any default header that you just set is changed with the “featured image” of a put up. You can solely see the new header when viewing that put up. In this week’s WordPress Quick Tip we’ll see how easy it’s to add further headers to the Header’s Panel.

Watch the Screencast

Functions.php

Open up the features.php file of the Twenty Ten theme. Locate the following part:

// Default customized headers packaged with the theme. %s is a placeholder for the theme template listing URI.

What follows is an array itemizing the present default headers and their location. To add your individual, add a comma after the final parenthesis of the array of sundown header. Here’s an instance of what it will possibly appear to be after including two extra headers:

register_default_headers( array(
‘berries’ => array(
‘url’ => ‘%s/images/headers/berries.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/berries-thumbnail.jpg’,
/* translators: header picture description */
‘description’ => __( ‘Berries’, ‘twentyten’ )
),
‘cherryblossom’ => array(
‘url’ => ‘%s/images/headers/cherryblossoms.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/cherryblossoms-thumbnail.jpg’,
/* translators: header picture description */
‘description’ => __( ‘Cherry Blossoms’, ‘twentyten’ )
),
‘concave’ => array(
‘url’ => ‘%s/images/headers/concave.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/concave-thumbnail.jpg’,
/* translators: header picture description */
‘description’ => __( ‘Concave’, ‘twentyten’ )
),
‘fern’ => array(
‘url’ => ‘%s/images/headers/fern.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/fern-thumbnail.jpg’,
/* translators: header picture description */
‘description’ => __( ‘Fern’, ‘twentyten’ )
),
‘forestfloor’ => array(
‘url’ => ‘%s/images/headers/forestfloor.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/forestfloor-thumbnail.jpg’,
/* translators: header picture description */
‘description’ => __( ‘Forest Floor’, ‘twentyten’ )
),
‘inkwell’ => array(
‘url’ => ‘%s/images/headers/inkwell.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/inkwell-thumbnail.jpg’,
/* translators: header picture description */
‘description’ => __( ‘Inkwell’, ‘twentyten’ )
),
‘path’ => array(
‘url’ => ‘%s/images/headers/path.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/path-thumbnail.jpg’,
/* translators: header picture description */
‘description’ => __( ‘Path’, ‘twentyten’ )
),
‘sunset’ => array(
‘url’ => ‘%s/images/headers/sunset.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/sunset-thumbnail.jpg’,
/* translators: header picture description */
‘description’ => __( ‘Sunset’, ‘twentyten’ )
),
‘waterfall’ => array(
‘url’ => ‘%s/images/headers/waterfall.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/waterfall-thumbnail.jpg’,
/* translators: header picture description */
‘description’ => __( ‘Waterfall’, ‘twentyten’ )
),
‘mountain’ => array(
‘url’ => ‘%s/images/headers/mountain.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/mountain-thumbnail.jpg’,
/* translators: header picture description */
‘description’ => __( ‘Mountain’, ‘twentyten’ )
)
) );

Lets dissect the code slightly bit.

register_default_headers : This is the operate that creates and shows our default headers. It accepts an array of parameters.

identify: Sets a worth with our headers identify. We can then set an array of further values and keys.

url: Relative path to the header picture. Notice that the present path is /pictures/headers/image_name.jpg

thumbnail_url: Relative path to a thumbnail of the header picture. Current path is /pictures/headers/image_name-thumbnail.jpg

description: An outline of the picture. This can be show upon hovering over the picture inside the Headers Panel.

Things to Note

The Twenty Ten header is 940×198, something greater than that may be resized; something smaller can be stretch to match these dimensions. The thumbnail pictures will be set to any dimensions, 230×48 is the default. The pictures can solely be .jpg or they are going to be ignored and received’t be displayed.