WordPress Twenty Thirteen Child Theme Change Header Banner size

Question

I hope someone can help me with the following problem.

I'm creating a website using a Child Theme with the WordPress Twenty Thirteen Theme as basis. Here I was asked to add a header banner with the size 1100x328px. The problem is that the Twenty Thirteen Theme has a fixed size of 1600x230px, so I somehow need to change the size of the header banner.

Now I found the following code in the 'custom-header.php' located in the 'inc'-folder inside the Twenty Thirteen folder.

function twentythirteen_custom_header_setup() {
  $args = array(
    // Text color and image (empty to use none).
    'default-text-color'     => '220e10',
    'default-image'          => '%s/images/headers/circle.png',

    // Set height and width, with a maximum value for the width.
    'height'                 => 230,
    'width'                  => 1600,

    // Callbacks for styling the header and the admin preview.
    'wp-head-callback'       => 'twentythirteen_header_style',
    'admin-head-callback'    => 'twentythirteen_admin_header_style',
    'admin-preview-callback' => 'twentythirteen_admin_header_image',
  );

  add_theme_support( 'custom-header', $args );
    .
    .
    .
}

And further down:

.site-header {
    background: url(<?php header_image(); ?>) no-repeat scroll top;
    background-size: 1600px auto;
}

If I change the values 'height' and 'width' in the first part, change the 'background-size' of the class '.site-header' further down, and finally change the min-height of the class '.site-header .home-link' in the 'style.css', it works perfectly fine. The banner is shown as I want it to.

But now, since I use a Child Theme it would be better if these changes were made in there, not in the Parent Theme. But I haven't figured out yet how to do it.

Is there a way to change these values in the Child Theme (e.g. in the functions.php) or can I only change it in the Parent Theme?

Greetings shinigami

You should create the same directories in your child theme. Meaning, create a folder called inc and put your file inside this folder. You don't hve to create all the directories and files. Just the path you are working on. — Rüzgar
You mean putting a copy of 'custom-header.php' with changed values in the new path? If yes, I already did this, but the theme still uses the one in the parent theme. I think I need to add some function in the child theme's functions.php to change the path, but I don't know how to do it. — shinigami
Except from functions.php and style.css all the other files should work automatically. But if this is not working, then it must be still pointing at parent directory. So try changing the path function. Especially if you are working local. You can use get_stylesheet_directory() . '/inc/custom-header.php' or depending on your WP version, read this — Rüzgar
I tried a few things, but it still won't work. get_stylesheet_directory()or get_stylesheet_directory_uri()don't throw an error, but nothing happens. I think the problem is that in the parent theme's functions.php there is the entry require get_template_directory() . '/inc/custom-header.php';. And probably that causes that the file in the child theme won't work. Is there a way to "overwrite" the entry in the parent theme's functions.php? — shinigami

Rüzgar Rüzgar · Accepted Answer · 2017-04-24T16:02:50

First of all you cannot change require get_template_directory() . '/inc/custom-header.php'; in functions.php because it is not declared inside a function.

My advice is to use css instead of dealing with Wordpress core functions. You can use

.site-header {
    background-size: 1100px auto !important;
}

But still, if you just want to play with what is inside twentythirteen_custom_header_setup you can change this in child theme's functions.php. Here is how to do it :

$args = array(
'height'                 => 328,
'width'                  => 1100
);
add_theme_support( 'custom-header', $args );

or even you can change everything inside that function like so :

$args = array(
// Text color and image (empty to use none).
'default-text-color'     => '220e10',
'default-image'          => '%s/images/headers/circle.png',

// Set height and width, with a maximum value for the width.
'height'                 => 328,
'width'                  => 1100,

// Callbacks for styling the header and the admin preview.
'wp-head-callback'       => 'twentythirteen_header_style',
'admin-head-callback'    => 'twentythirteen_admin_header_style',
'admin-preview-callback' => 'twentythirteen_admin_header_image',
);
add_theme_support( 'custom-header', $args );

Hope this helps.

WordPress Twenty Thirteen Child Theme Change Header Banner size

1 Answers