Twenty Eleven header image size

If you use default theme of WordPress 3.2, you may notice that Twenty Eleven header image is quite big.

Although I have no doubt of the theme’s coolness, I personally think that the header is too big.

This I already mentioned when I wrote Twenty Eleven theme video introduction post.

Twenty Eleven header image features is really nice, because you can make them loading randomly, without adding special codes in the template files.

Twenty Eleven Header Image – Change size and images dimensions

When you want to change the Twenty Eleven theme header size and dimension, especially the height, we should do one important thing first.

What this means, when you upload your picture or image to be the header, this image should be made or created in the exact height, so that the height we want to edit the functions.php will be the exact height of the image itself.

This is because we all want that our visitors can load our site faster, if we say, the height is 200 but in fact the image’s height is 288, then the browser will load a bit slower than if we upload the same height images.

How to change Twenty Eleven header image size?

First of all, all we need is a child theme of wp 3.2 default theme. I have created Twenty Eleven child theme tutorial if you want to know the simple way how to create one.

I have also posted two other tutorials, which are adding logo, and change continue reading wordpress in TwentyEleven theme.

Screenshot of smaller header:

The smaller header (100px)

Changing Twenty Eleven header image size video:

Steps to change Twenty Eleven header size:

1. Create a child theme, and the header image. (in the demo, I use two images, size: 1000px x 100px.)

2. Create a new blank functions.php in the child theme folder.

3. Add this code in that functions.php file (and save it);

<?php
?>

3. Open the original “Twenty Eleven” theme’s functions.php, and look for this line:

define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 288 ) );

Copy and paste that code, and save it in the new made functions.php of your child theme, it will look like this at the end;

<?php
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 288 ) );
?>

4. Now change the “288″ from the code above to the height of your images.

Mine will look like this;

<?php
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 100 ) );
?>

The height from 288 to 100px

In this demo, I want in image with 100px height, so I create an image with 1000 width, and 100px height.

5. Uploading the image or images (if you have more than one) by going to “Appearance” and header. There is an upload button to upload your image file, you can set them to random too if you upload more than one.

Click “save changes” in the bottom of the page, once you are done with uploading images, or set them to random header images.

6. Refresh your blog, and your Twenty Eleven header image size should be smaller (in this case, it has 100px height).

Conclusion; I really suggest you to make TwentyEleven child theme, and prepare your images, and then you can finally set your Twenty Eleven header image size as you wish.