TwentyTen Child Theme – Change Header Image Size

I posted last week about Adding Widget areas to a TwentyTen Child theme and put some warnings in the post about setting up the functions.php file for your theme. Head those warnings.     Another thing a lot of people want to do is change the size of their header image.   I have a number of different child theme designs for TwentyTen child themes.   In almost every design I change the size and location of the header image.   The location is easily handled in the CSS and individual php files (Ex. header.php)   But if you change the size of that image, you need to include this in the functions.php file for the child theme.

This was another one of those search, search, search, try, try, try,   BOOM, BOOM, BOOM issues.   Till I ran across this simple bit of code somewhere in the codex forums. for changing header image sizes.   I wish I could find that comment again.   I copied every scrap of code I could find into a doc then started trying them one at a time.   This was the only one that really worked without producing errors for one reason or another.

The code you want is those first few lines.   I’ve thrown in combining this with adding a single new widget area to the theme to show how easy it is to come your child theme functions.


add_action( ‘after_setup_theme’, ‘child_theme_setup’ );

if ( !function_exists( ‘child_theme_setup’ ) ):
function child_theme_setup() {
define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘twentyten_header_image_height’, 198 ) );
define( ‘HEADER_IMAGE_WIDTH’, apply_filters( ‘twentyten_header_image_width’, 770 ) );

register_sidebar( array(
‘name’ => __( ‘First Header Widget Area’, ‘twentyten’ ),
‘id’ => ‘first-header-widget-area’,
‘description’ => __( ‘The first header widget area’, ‘twentyten’ ),
‘before_widget’ => ‘<li id=”%1$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
) );

Simply set the width and height values to match your theme modification. They will stay put no matter how often the TwentyTen parent theme is updated.

Anyone with a modified header image size?
Share it, Yes, a free back-link, but it should be TwentyTen and not the standard 940 X 198 px.


  1. Thanks so much for this great info! Worked like a charm! Changed header size to 940×253.