How to change default header image dimensions in twentyfourteen child theme?

Question

I'm creating a child theme based on twentyfourteen and wish to change the custom header image dimensions. The custom header page states:

Images should be at least 1260 pixels wide. Suggested width is 1260 pixels. Suggested height is 240 pixels.

This appears to come from defaults set in /inc/custom-header.php:

function twentyfourteen_custom_header_setup() {
    add_theme_support( 'custom-header', apply_filters( 'twentyfourteen_custom_header_args', array(
        'default-text-color'     => 'fff',
        'width'                  => 1260,
        'height'                 => 240,
        'flex-height'            => true,
        'wp-head-callback'       => 'twentyfourteen_header_style',
        'admin-head-callback'    => 'twentyfourteen_admin_header_style',
        'admin-preview-callback' => 'twentyfourteen_admin_header_image',
    ) ) );
}
add_action( 'after_setup_theme', 'twentyfourteen_custom_header_setup' );

This file is included by twentyfourteen/functions.php:

require get_template_directory() . '/inc/custom-header.php';

Because this line uses get_template_directory() and not get_stylesheet_directory(), I can't override it with my own version of custom-header.php.

Is there a way I can change the requested dimensions in my child theme?

Answer 1

The is a filter to the custom header function in the twenty fourteen theme. You can use that to add your new sizes. Here is what I use to change the default size.

function wpse_custom_header_setup() {
    add_theme_support( 'custom-header', apply_filters( 'wpse_header_args', array(
        'width'                  => 1460,
        'height'                 => 220,
    ) ) );
}
add_action( 'after_setup_theme', 'wpse_custom_header_setup' );

EDIT

Also set max width of site-header found in lines 847 to 853 accordingly

.site-header {
    max-width: 1460px;
}

Answer 2

You can simply add this code to your child themes functions file and change the values for the width and the height.

Depending on your theme, you may also need to modify the values in your style sheet for different header elements however based on my testing, this is not needed when using a Twenty Fourteen child theme.

add_theme_support( 'custom-header', array(
'header_image'    => '',
'header-selector' => '.site-title a',
'header-text'     => false,
'height'          => 90,
'width'           => 300,
) );

The above method ONLY effects the Custom Header function under Appearance > Header when you add your image using this function which forces you to crop to these exact dimensions and does not change the size of an existing header image already added using any method. To do that, you will need to modify the CSS code which effects your #site-header image.

You could also use the theme_mod_header_image filter

Note: The header-selector class will vary per theme.