wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
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 February 18, 2017
Posted on July 13, 2011

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.)

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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.

images Space twenty eleven twentyeleven wp 3.2

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Continue Reading Twenty Eleven WP 3.2 [How to change VIDEO]
→ Twenty Eleven white space above header [How to remove it]

Comments

  1. Sean says

    July 15, 2011 at 11:43 pm

    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;
    }

    • Kimi says

      July 16, 2011 at 6:46 pm

      Hi Sean,

      Thank you for the another input, really appreciate it!

      Kind regards,

      Kimi.

    • Sanja C. says

      August 23, 2011 at 9:37 pm

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

    • George Mihaly says

      November 16, 2011 at 5:01 am

      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-

  2. Sebastian says

    July 18, 2011 at 3:56 pm

    Hi Kimi,

    well done! A really great tutorial for beginners like me! Thank you!

    • Kimi says

      July 19, 2011 at 3:51 pm

      Thank you Sebastian!

  3. vickie says

    July 18, 2011 at 9:20 pm

    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

    • Kimi says

      July 19, 2011 at 3:51 pm

      Hi Vickie,

      What kind or errors you got? I have used this in this dummy blog:

      http://goo.gl/3b8mF

      and not getting any errors.

      Kimi.

  4. Ant says

    August 3, 2011 at 2:28 pm

    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

    • Kimi says

      August 4, 2011 at 7:01 am

      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. Pete Downes says

    November 9, 2011 at 1:58 pm

    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

    • Kimi says

      November 9, 2011 at 6:45 pm

      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.

      • Pete Downes says

        November 9, 2011 at 7:15 pm

        Hi Kimi

        Thanks! I’m actually running Safari on Mac and there seems to be something similar to firebug built-in. I will check it out. Thanks again!

        Best wishes

        Pete

        • Kimi says

          November 13, 2011 at 9:11 am

          Most welcome, Pete!

          Have a good weekend

          Kimi

  6. Fernando says

    November 14, 2011 at 9:07 pm

    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

  7. Gunilla Wachtel says

    November 16, 2011 at 3:47 pm

    You are awesome! Thank you for these step by step tutorials :).

  8. Nic says

    December 5, 2011 at 11:51 pm

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

  9. Jali says

    December 23, 2011 at 1:05 am

    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. Serra says

    February 10, 2012 at 12:34 am

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

  11. Sylvain Bérubé says

    May 19, 2012 at 1:58 am

    Thanks for the help!

    Sylvain Bérubé, Sherbrooke

  12. Phil Brubaker says

    August 12, 2013 at 7:42 pm

    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. Phil Brubaker says

    August 12, 2013 at 7:44 pm

    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.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept