Making Customer Header Full Width

Hi @ross24!

The challenge here is going to be that the image is constrained by the site’s main container.

Try the following:

If you don’t already have one (it looks like you might) set up a child theme.

In you child theme’s folder, make a copy of the parent theme’s header.php file.

In your copy, we’re going to move the call for the header image, which is near the end and looks like this:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
	<img class="custom-header" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
</a>

Place it just before this line:

<div id="page" class="hfeed site">

That’ll place the image just outside of the site’s main container, so it isn’t being limited by that container’s width.

The next step is to tell the theme what size you want the image to be when you upload it.

In your child theme’s functions.php file, add this:

function my_custom_header_setup() {
	remove_theme_support( 'custom-header' );
	add_theme_support( 'custom-header', apply_filters( 'penscratch_custom_header_args', array(
		'default-image'          => '',
		'default-text-color'     => '666666',
		'width'                  => 1100,
		'height'                 => 300,
		'flex-height'            => true,
		'wp-head-callback'       => 'penscratch_header_style',
		'admin-head-callback'    => 'penscratch_admin_header_style',
		'admin-preview-callback' => 'penscratch_admin_header_image',
	) ) );
}
add_action( 'after_setup_theme', 'my_custom_header_setup');

Then, once that is all finished, remove your header image, and re-add it.

In that second block of code, the 1100 is the width (in pixels) that the image will be scaled down to (assuming the original image is wider than what you’ve entered).

You can tweak that number – if you go with something really wide, like 1400 or more, you should get a full width header on most monitors.