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.

Last updated by on .

2 Comments so far »

  1. mohd said

    am September 28 2013 @ 11:37 am

    Hi,

    I try it and it doesn’t work,

    I don’t know why.

  2. Oakley Sunglasses said

    am September 24 2014 @ 4:52 pm

    replica oakley sunglasses There are so many different brands, and each of them claims to be the best one, so why should you choose Oakley sunglasses? There are several reasons why. They offer better peripheral vision and clarity. They fit well,Fake Oakley Sunglasses, are ultra – light and offer all – day comfort. Their lenses are smudge resistant and they quarantee that rain, dust,oakley sunglasses Be it finesse, dirt or sweat won’t built up on them.Once you are convinced about it, there is noth

Comment RSS

Leave a comment

Name: (Required)

eMail: (Required)

Website:

Comment: