New Header Size Twentythirteen Wordpress

So we have the new theme for WordPress, twentythirteen. It looks really nice, and definitely fills out some responsive features.

But what if you wanted to change the header image and make it a logo, like so many of us do?

Well it isn't as easy in twentythirteen, and here is the quick solution I found out.

I still want to shrink this down and will update it if i can.


function twentythirteen_custom_header_setup_custom() {
$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' => 166,
'width' => 375,

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

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

/*
* Default custom headers packaged with the theme.
* %s is a placeholder for the theme template directory URI.
*/
register_default_headers( array(
'circle' => array(
'url' => '%s/images/headers/circle.png',
'thumbnail_url' => '%s/images/headers/circle-thumbnail.png',
'description' => _x( 'Circle', 'header image description', 'twentythirteen' )
),
'diamond' => array(
'url' => '%s/images/headers/diamond.png',
'thumbnail_url' => '%s/images/headers/diamond-thumbnail.png',
'description' => _x( 'Diamond', 'header image description', 'twentythirteen' )
),
'star' => array(
'url' => '%s/images/headers/star.png',
'thumbnail_url' => '%s/images/headers/star-thumbnail.png',
'description' => _x( 'Star', 'header image description', 'twentythirteen' )
),
) );
}
add_action( 'after_setup_theme', 'twentythirteen_custom_header_setup_custom' );

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

// If no custom options for text are set, let's bail.
if ( empty( $header_image ) && $text_color == get_theme_support( 'custom-header', 'default-text-color' ) )
return;

// If we get this far, we have custom styles.
?>
<style type="text/css" id="twentythirteen-header-css">
<?php
if ( ! empty( $header_image ) ) :
?>
.site-header {
background: url(<?php header_image(); ?>) no-repeat scroll top;
}
<?php
endif;

// Has the text been hidden?
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;

// If the user has set a custom color for the text, use that.
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
}


Enter that into your functions.php file and it should change the image width and height to the ones specified in the code.