WordPress 3.0 TwentyTen Child Theme Header Image

The new Twenty Ten theme for WordPress 3.0 provides support for uploading custom header images. Uploaded images are cropped to 940 x 198 pixels. So your options are:

  1. Ensure that your header image size is 940 x 198 pixels.
  2. Modify the Twenty Ten theme to change this size
  3. Create a child theme which overrides the size

I’m going to show you how to do option 3: change the Twenty Ten theme header image size. “Creating a child theme is the way of the future” (I think that Yoda said that, but I’m not sure).

The Twenty Ten header image size is defined in the functions.php function twentyten_setup(). The WordPress team has thoughtfully provided filters to simplify overriding the default height and width:

// The height and width of your custom header.
// You can hook into the theme's own filters to 
// change these.
// Add a filter to twentyten_header_image_width
// and twentyten_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', 
   apply_filters( 'twentyten_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', 
   apply_filters( 'twentyten_header_image_height', 198 ) );

You can define filters named “twentyten_header_image_width” and “twentyten_header_image_height” which will override the default values of 940 and/or 198.

To create filters which override these values, create a functions.php file in your child theme and add the following lines:

add_filter('twentyten_header_image_height','my_header_height');
add_filter('twentyten_header_image_width','my_header_width');
function my_header_height($size){
   return 300;
}
function my_header_width($size){
   return 900;
}

In this case I am ignoring the default sizes that are passed into the filter and simply setting them to the values that I want (900×300).
Be sure to change the prefix ‘my_’ to something more appropriate and unique to your child theme to avoid possible naming conflicts.

That’s all it takes! Use the Appearance -> Header control panel to upload a new header image now. The control panel should now display the size that you set with these filters, and the new size reflected on the website.

Now having said that, I subsequently decided that I want different sizes and layouts for the front and other pages, so I ultimately modified the header.php file. Don’t judge me.

17 Replies to “WordPress 3.0 TwentyTen Child Theme Header Image”

  1. Hi Ron, Could a filter be added to the functions page to display all the header images on one page? instead of just one?

  2. I was hoping of using the all the images in the Twentyten header as a slideshow, but to do this I need to be able to load all the images into the page not just one, I wondered if there was a modification that could be made that would allow all the header images to load into the page.

  3. Thanks that’s waht I needed!

    BTW, did I oversee it?

    Is it know possible to let the headerpictures as a slideshow?

    Mark

  4. Hi ron,

    I have been trying to figure out how to do this using my child theme. I put the functions.php into my child theme and added the code to increase the header picture but nothing happened?

    any help is greatly appreciated

  5. It’s hard to know for sure what the problem is just from your description. Can you adjust the size either direction? For example, if it is possible to make the image smaller but not larger, than the image might be getting clipped by some other element.

  6. Ron,

    Thanks for this post.

    I’ve created a child theme, applied it, and created a functions.php with the following code:

    add_filter('twentyten_header_image_height','pica_header_height');
    add_filter('twentyten_header_image_width','pica_header_width');
    function pica_header_height($size){
    return 56;
    }
    function pica_header_width($size){
    return 900;
    }

    But it’s not working for me. I’m seeing this code displayed in the top of the admin WP view and the Header setting is still using the default width and height.

    Thanks for your help!

  7. Hi ron!

    Is it possible to apply this function to a child theme of a modified and changed ‘twentyten’ theme?

    for eg. i copied and changed ‘twentyten’ into ‘hometheme’..
    and created the ‘hometheme’ child as ‘hometheme child’..

    how do i apply this function?

    sorry if this question is irrelevant..
    thanx!

  8. The beauty of child themes is that you can simply replace the pieces that you need to change, not everything.
    So in your example above, all you really need to copy to ‘hometheme’ is style.css and add the line “Template: twentyten” to the comment (header) section at the top.
    This will tell WP to use everything in ‘twentyten’ theme, but override it with the files included in ‘hometheme’.
    Note that WP handles child themes somewhat inconsistently (although in a good way).
    Normally, specifying any files will cause that file to be used instead of the file in the parent theme. This is not true for the functions.php file. A child theme’s functions.php can simply add new code to the parent’s functions.php file.

  9. Hey Ron,
    Got the twenty ten header size changed and uploaded ok, but there is a 20px margin on the left hand side. I’ve tried changing things but can’t get it. Also how do you change the access to be the same width as header (980px in my case).
    Help is welcomed.
    Thanks

Leave a Reply