phphtmlcsswordpresschild-theming

WordPress Twenty Thirteen Child Theme Change Header Banner size


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


Solution

  • 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.