Massive headers

Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes.

Hello Esmi,
I have created a child theme!
Do you know what code I need to change the headers?

Diane

In your child theme’s functions.php file, try adding:

remove_theme_support( 'custom-header' );

function my_custom_header_setup() {
	$args = array(
		'default-text-color'     => '220e10',
		'default-image'          => '%s/images/headers/circle.png',

		'height'                 => 130,
		'width'                  => 1600,

		'wp-head-callback'       => 'my_header_style',
		'admin-head-callback'    => 'my_admin_header_style',
		'admin-preview-callback' => 'twentythirteen_admin_header_image',
	);
	add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'my_custom_header_setup' );

function my_header_style() {
	$header_image = get_header_image();
	$text_color   = get_header_textcolor();

	if ( empty( $header_image ) && $text_color == get_theme_support( 'custom-header', 'default-text-color' ) )
		return;
	?>
	<style type="text/css" id="twentythirteen-header-css">
	<?php
		if ( ! empty( $header_image ) ) :
	?>
		.site-header {
			background: url(<?php header_image(); ?>) no-repeat scroll top;
			background-size: 1600px auto;
		}
	<?php
		endif;

		if ( ! display_header_text() ) :
	?>
		.site-title,
		.site-description {
			position: absolute;
			clip: rect(1px 1px 1px 1px); /* IE7 */
			clip: rect(1px, 1px, 1px, 1px);
		}
	<?php
			if ( empty( $header_image ) ) :
	?>
		.site-header .home-link {
			min-height: 0;
		}
	<?php
			endif;

		elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) :
	?>
		.site-title,
		.site-description {
			color: #<?php echo esc_attr( $text_color ); ?>;
		}
	<?php endif; ?>
	</style>
	<?php
}

function my_admin_header_style() {
	$header_image = get_header_image();
?>
	<style type="text/css" id="twentythirteen-admin-header-css">
	.appearance_page_custom-header #headimg {
		border: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing:    border-box;
		box-sizing:         border-box;
		<?php
		if ( ! empty( $header_image ) ) {
			echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;';
		} ?>
		padding: 0 20px;
	}
	#headimg .home-link {
		-webkit-box-sizing: border-box;
		-moz-box-sizing:    border-box;
		box-sizing:         border-box;
		margin: 0 auto;
		max-width: 1040px;
		<?php
		if ( ! empty( $header_image ) || display_header_text() ) {
			echo 'min-height: 130px;';
		} ?>
		width: 100%;
	}
	<?php if ( ! display_header_text() ) : ?>
	#headimg h1,
	#headimg h2 {
		position: absolute !important;
		clip: rect(1px 1px 1px 1px); /* IE7 */
		clip: rect(1px, 1px, 1px, 1px);
	}
	<?php endif; ?>
	#headimg h1 {
		font: bold 60px/1 Bitter, Georgia, serif;
		margin: 0;
		padding: 58px 0 10px;
	}
	#headimg h1 a {
		text-decoration: none;
	}
	#headimg h1 a:hover {
		text-decoration: underline;
	}
	#headimg h2 {
		font: 200 italic 24px "Source Sans Pro", Helvetica, sans-serif;
		margin: 0;
		text-shadow: none;
	}
	.default-header img {
		max-width: 230px;
		width: auto;
	}
	</style>
<?php
}

Then add:

.site-header .home-link {
     min-height: 130px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
}

to your child’s style.css file. This should reduce the header height from 230px to 130px.

Wow! Thanks for that Esmi!

Um – and where is the “functions php file” please?

It should be an empty file with just an opening <?php statement in your child theme’s folder.

So,

I open word pad,
Paste the code you gave me,
save it as functions.php
and in my child theme directory.

Did I miss anything out?

Do not use WordPad! You must use a plain text editor such as Notepad.

Ok,

but apart from that this is all I need to do; in other words, does the code you gave me include the “opening <?php statement”?

does the code you gave me include the “opening <?php statement”?

No.

Oh – what would that be please?

Just add <?php to the very top of the file.

Ok – here goes nothing…

Ah no crashes! Thanks Esmi! The cropper tool is still awol though – do you think it might be because I’m managing a few sites from the same dashboad? It’s not giving me horizontal widening; just a narrow strip of picture!

The code I gave above worked fine for me.

Thankyou