Customizing Twentyeleven, Let’s Start With Width and Smaller Header

I dig twentyeleven. It’s got a lot of fun features and it looks pretty good. There were a couple of things I didn’t like, however. The header is kind of GIANT. So I’m going to need to take care of that. Also, although it is flexible width, the maximum width was a bit too narrow for my taste. Also, I need wider sidebars, I don’t like things looking so cramped over there. While I’m messing with the header, I have my own logo for VoodooPress, no need for the site name to be up top. I’m going to get rid of that, and while I’m at it relocate the search and site description to overlay my header image. Finally, I like my widgets to have their own home, they need a nice box to seperate them from the content a little. It’s pretty easy to get this all done, check it out!

So the first thing I need to do, is to widen the max-width of the theme. You’ll notice some extra css in some of my examples. I also reduced margins in some places. Twentyeleven had too much white space for my taste. Some people love it that way, but hey, this is what I like! Before we get into this too far, make sure you have your child theme set up. If you forget how, run over here and check it out. Just remember, that tutorial is for twentyten. You’ll have to just adjust the header and import rule to refer to twentyeleven.

Here’s where the theme width is set up in twentyeleven’s style.css:

/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}

Really all you need to do there is adjust the max-width in #page. Here’s my final view:

#page {
	margin: 1.5em auto;
	max-width: 1050px;
	border-top: 15px solid #bbb;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}

Honestly, that’s it. You’ll see I have some extra stuff in there. I tweaked the margin to reduce the gutters on the side, and I added a think rounded border to the top. That’s just for my visual taste, When I remove all the info from above the header image, it looked a bit harsh. I liked the idea of just a little visual interest up top.

So with that out of the way, I realized that with a wider theme, I’d need a wider header image. This is super simple. I just made a functions.php file in my child theme and added (NOTE: this is new update code to add a filter, which is the preferred way to do this):

//CUSTOM HEADER SIZE
add_filter( 'twentyeleven_header_image_height', 'voodoo_header_height');
function voodoo_header_height($param) {
return 175;
}
add_filter( 'twentyeleven_header_image_width', 'voodoo_header_width');
function voodoo_header_width($param) {
return 1050;
}

For informational purposes, below is the old function I used to adjust the header image. It worked, but one of our readers pointed out in the comments that we weren’t using the best method. So I recommend you use the above code, the code below is just kept for comparison.

//CUSTOM HEADER SIZE
add_action( 'after_setup_theme', 'voodoochild_theme_setup' );

if ( !function_exists( 'voodoochild_theme_setup' ) ):
function voodoochild_theme_setup() {
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 175 ) );
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1050 ) );
}
endif;

Don’t forget the opening php tag at the top if you are started a brand new functions.php file. OK, now with that above function I’ve altered twentyeleven’s header image from 1000x288px to a wider and shorter 1050x175px. Of course you can just do the width and leave the height line out, or use different values.

With the new header image in place, any new header you upload either through the header menu, or using the featured image uploader will be in that size. But I’ve had VoodooPress going for a bit, and it used to use twentyten, which had different header sizes. Chances are your site will not look right if you already have posts with thumbnails. No problem, I’ve got you covered! Check out this handy plugin here. It’ll regenerate your thumbnails and get everything looking so good once again.

One final thing I needed to deal with to get my headers to work properly. Sometimes I like to use images that are smaller than the header. By default if you do that, it won’t be used as your header image. Well, I copy header.php from twentyeleven and put it into my theme. I need to tweak some things further on it, so I need my own copy used. I found this bit of code toward the bottom of header.php:

	has_post_thumbnail( $post->ID ) &&
	( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
	$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!

I just deleted

&&
							$image[1] >= HEADER_IMAGE_WIDTH

So I was left with:

	has_post_thumbnail( $post->ID ) &&
	( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT ) ) ) ) :
// Houston, we have a new header image!

And that allows for featured images smaller than the minimum size to still be used. So we are getting pretty close to good here. We’ve got a wider theme, a wider header image to fit the theme and more options for our header image size. Tomorrow, we’ll finish this off. Tweaking the rest of the white space, readjusting the header some more, and prettying up the widget areas. After that, I’ll post up my header.php and style.css code in case I forgot anything, so you can peep my finished product so far. Once I have myself a nice basic child theme done to my liking, it’ll be time to look for new fun to be had.

Leave a Reply to MartyCex Cancel reply

Your email address will not be published. Required fields are marked *