wpvidZ

Learn WordPress With Video Tutorials

wpvidZ Blog WordPress themes Twenty Eleven Header Image How to Change size

WordPress themes

Twenty Eleven Header Image How to Change size

Last updated on
Posted on

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:

twenty eleven 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 ) );
?>

twenty eleven header
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.

Latest Posts

Comments

  1. I’m not sure, but I think this will define the header height once (in your child theme), and attempt to define it again (in the parent theme) resulting probably in a lot of stuff in your error logs. Either way, I think a cleaner way to accomplish this would be using a filter, by putting the following in your child theme’s functions.php:

    add_filter( ‘twentyeleven_header_image_height’, ‘twentyeleven_header_image_height_adjust’);
    function twentyeleven_header_image_height_adjust($param) {
    return 109;
    }

    • Hi Sean I tried the same thing you wrote but it didn’t work, I wonder if it’s because of the static variables?

    • Thank you so much for this tutorial and the child theme tutorial! Very simple to follow and effective 🙂 I followed the vimeo video instructions and loved it. Thanks again & cheers -George-

  3. Hi
    Thank you Kimi. I am getting lots of errors after doing this on my test site and think I’m having the problem Sean mentions.
    Please could you help with where the height/width are defined in the alternative solution in functions.php?
    Many thanks

  4. Hi Kimi,
    Nice fix – and thanks so much for teaching me about Child Themes – a really helpful thing to know.

    I’ve made the changes as per above, and it all works which is great, but I am getting these errors in the admin area. If I remove the functions file, it dissapears..:

    Any ideas how to get rid of these messages?

    Warning: Cannot modify header information – headers already sent by (output started at /mounted-storage/home57c/sub004/sc36505-ZMFP/footprintsforthefuture.com/wp-content/themes/MyTwentyEleven/functions.php:7) in /mounted-storage/home57c/sub004/sc36505-ZMFP/footprintsforthefuture.com/wp-includes/functions.php on line 861

    Warning: Cannot modify header information – headers already sent by (output started at /mounted-storage/home57c/sub004/sc36505-ZMFP/footprintsforthefuture.com/wp-content/themes/MyTwentyEleven/functions.php:7) in /mounted-storage/home57c/sub004/sc36505-ZMFP/footprintsforthefuture.com/wp-includes/functions.php on line 862

    • Hi Ant!

      Welcome to my blog..

      That header information thing can be caused by many things, as there was possibly empty space somewhere in functions.php..

      Cleaning empty space in functions.php of your child theme may fix this.

      Or write the code manually, and not copy or paste will also help.

      I have never had this problem though

      Kimi.

  5. Hi Kimi,

    Thanks so much for the child theme and header tutorials for the Twenty Eleven theme. I managed to do what you said and works a treat!

    In your child theme video, you managed to select a header and go straight to the relevant style sheet code in another window. How did you do that?

    Thanks again

    Pete

    • Hi Pete!

      If you are using Firefox (or chrome but I personally use Firefox), you can install an addon called firebug, here is the quick link to download: http://getfirebug.com/

      I hope this helps

      Thanks for leaving a comment and good luck with your blog!

      Kind regards

      Kimi.

  6. Hi Kimi,

    I did exactly what you do on the video and it works perfectly on Firefox and IE, but it breaks when using Chrome or a mobile device (iPhone, in my case). Any idea of what might be causing this? Please, take a look at my website using Chrome to check it http://www.naogu.es.

    Thank you very much!

    Fer

  8. Many thanks for this blog – I followed it and it worked perfectly. The videos are so helpful.
    Many thanks again,
    Nic

  9. How to the image on other location, i mean if my site is a.com, then the image is stored in b.com?

    I like the image size, but i want to store it in other location.

    Thanks,
    Jali

  10. Thank you so much!!! I’ve been trying to do this for hours and finally found a solution here. Thanks again 🙂

  12. Hi,

    My image is 250 by 142 yet your changes still show a hugh image. It says “Images should be at least 250 pixels wide. Suggested width is 250 pixels. Suggested height is 142 pixels.” but my image looks the same … 1000 x 288. Ideas what else needs changing to get an image sized 250 x 142?

    Thanks, Phil

  13. Hi,

    My image is 250 by 142 yet your changes still shows a huge image. It says “Images should be at least 250 pixels wide. Suggested width is 250 pixels. Suggested height is 142 pixels.” but my image looks the same … 1000 x 288. Ideas what else needs changing to get an image sized 250 x 142?

    Thanks, Phil

Comment form on this post is closed after 60 days.