Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

Adding Additional Default Headers to the WordPress Twenty Ten Theme

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
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.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Horst says:

    Hey, thanks a lot for that tuturial. You saved may day!

    Regards
    Horst

  2. neocelt says:

    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.

    • Editorial Staff says:

      You can add your theme directory hook like you would in header.php file.

    • Piet says:

      It is actually strange that WPBeginner recommends people to tinker with the Twenty Ten theme files directly. As soon as the theme receives an update, all your hard labor will be gone! WordPress recommends to make a child theme and then your code won’t work. The correct way of adding it to your functions.php is not with %s but by adding the following code:

      //Add additional headers
      function yourchildtheme_setup(){

      $yourchildtheme_dir = get_bloginfo(‘stylesheet_directory’);
      register_default_headers( array (
      ‘image1’ => array (
      ‘url’ => “$yourchildtheme_dir/images/image1.jpg”,
      ‘thumbnail_url’ => “$centipede_dir/images/thumbs/image1.jpg”,
      ‘description’ => __( ‘Image Description’, ‘yourchildtheme’ )
      ), // if you have more than one image you will need a comma between all of them, except for the last one
      ‘image2’ => array (
      ‘url’ => “$yourchildtheme_dir/images/image2.jpg”,
      ‘thumbnail_url’ => “$centipede_dir/images/thumbs/image2.jpg”,
      ‘description’ => __( ‘Image Description’, ‘yourchildtheme’ )
      ) // the last image does not get a comma
      ));
      }
      add_action( ‘after_setup_theme’, ‘yourchildtheme_setup’ );

      For a full explanation, please visit http://wp.me/pNIxD-1l

  3. Renato says:

    Great post!
    Easy to do, but hard to find other tutorials on the subject. Thanks for that!

  4. Rob Smelik says:

    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!

  5. Shirley says:

    how do we change the size of the Twenty Ten header from 940×198 to something else?

    • Editorial Staff says:

      By creating a child theme that modifies the styling of a Twenty Ten theme.

      • Shirley says:

        i would like to modify the twenty-ten theme itself. where can i do this without creating a child theme? thx

        • Editorial Staff says:

          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.

  6. Jae Xavier says:

    Simple enough for beginner like me.

    Textmate is awesome btw!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.