Replace/Remove Default Header Image Twenty Eleven Theme

Posted on

[This post has been updated to reflect the code of Twenty Eleven version 1.4]

Ten days ago, on July 4, 2011, WordPress 3.2 was released and with it came a new default theme: Twenty Eleven, which is actually based on a theme called Duster.

By far the most popular tip on WPTIPS is “Replace Default Header Image Twenty Ten Theme“, which we wrote almost a year ago and has generated almost 5,000 views at time of writing this tip.

Although the process to replace the default header image of the Twenty Eleven WordPress theme is very similar to that of Twenty Ten, we thought it appropriate to show it here on WPTIPS as people will be looking for tutorials on this subject.

Let’s get started – Child Theme

As you probably know, to protect yourself from future updates, we first make a Child Theme of Twenty Eleven. For a Child Theme to have basic functionality you need the index.php file, the style.css file and the functions.php file. If you want you can also add an image, but the only function that will have that it shows nicer in your Manage Themes window (under Appearance in your WordPress Dashboard).

In your themes directory, where you see the folder twentyeleven, add a folder with the name of your child theme, let’s use child2011 for the sake of clarity.

Copy the index.php from twentyeleven and paste it in your new folder. Open your favorite text editor and create a new file. For now we will leave this blank and you can save it as functions.php. Create another file and paste the following there:

/*
Theme Name: Child 2011
Description: Child theme for the Twenty Eleven theme 
Author: Your name here
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");

You can save this file as style.css in the child2011 folder.

Hacking the functions to remove the default header

The Twenty Eleven WordPress theme comes again with a set of header images that you can even show at random, but although these images are all very beautiful, they are not necessarily suitable for your website, so let’s show you how to get rid of them all!

Open the functions.php file we made above in your favorite text editor and add the following lines of code to it. Below we will explain what we just did.

<?php
// REMOVE TWENTY ELEVEN DEFAULT HEADER IMAGES
function wptips_remove_header_images() {
	unregister_default_headers( array('wheel','shore','trolley','pine-cone','chessboard','lanterns','willow','hanoi')
	);
}
add_action( 'after_setup_theme', 'wptips_remove_header_images', 11 );
?>

In line 3 of the code above you see that we have given this function the name wptips_remove_header_images. You can basically name it anything you want, as long as you make sure that the 3rd line and line 7 use exactly the same function name.
It is by the way good practice not to call it just “remove_header_images”, but instead use a prefix, like we have done with “wptips_”. The chance that someone else, for example a plugin developer, uses the exact same function name is close to zero if you use such a prefix and therefore you avoid any potential conflicts.

On lines 143-193 of the Twenty Eleven functions.php file you can see all the names of the header images shipping with the new WordPress default theme. To get rid of them we just need to fill our array with those names. If you want to keep one of the default images, you can just omit the name of that particular image and it will remain.

The last line of our function adds the action. It tells WordPress that after the setup of the theme to use our function to remove the headers and give it a priority of 11. The thought behind this is as follows:
Before you can remove anything, it first has to load. So after the entire theme has been set up, we run this function to remove what was just added (by Twenty Eleven) and as the setup in Twenty Eleven is running on priority 10, we have to make it run after that, therefore 11.

OK, the Default Images are gone, Now What? Replace the Default Header Image

Now we are going to use your new functions.php file again to add a function that tells WordPress to use your own image(s) instead!

This is very similar to last year, so we keep it brief here. Just keep in mind that your new images are same size (default is 1000px x 288px if you want to resize that’s ok, but then don’t forget to copy, paste and change this in the functions.php file.
In the dashboard of your child theme it looks nice if you have the thumbnails, so you need to make them and save them too in the images folder of your child theme. The standard size of these thumbnails is 230px x 66px.

//ADD NEW DEFAULT HEADER IMAGES
function wptips_new_default_header_images() {
	$child2011_dir = get_bloginfo('stylesheet_directory');
    register_default_headers( array (
        'image1' => array (
            'url' => "$child2011_dir/images/image1.jpg",
            'thumbnail_url' => "$child2011_dir/images/image1-thumb.jpg", // 230 x 66px
            'description' => __( 'Image Description', 'child2011' )
        ), // if you have more than one image you will need a comma between all of them, except for the last one
        'image2' => array (
            'url' => "$child2011_dir/images/image2.jpg",
            'thumbnail_url' => "$child2011_dir/images/image2-thumb.jpg", // 230 x 66px
            'description' => __( 'Image Description', 'child2011' )
        ) // the last image does not get a comma
    ));
}
add_action( 'after_setup_theme', 'wptips_new_default_header_images' );

As time progresses, you will find more and more articles covering this particular subject. One site in particular that wrote a similar article before us is by VoodooPress. Make sure to check out the site as there are many interesting tutorials, for example on how to add sidebars to your Twenty Eleven Child Theme.

A Different Approach

Personally we strongly dislike the fact that Twenty Ten and now also Twenty Eleven replace the header image with any large images you upload in your Posts. Especially if you think of a company website, you don’t want your entire branding to fall apart, just because you uploaded a large image to a particular news article. Maybe for bloggers this is less of an issue, but now that WordPress is trying so hard to get out of the blog-corner and more into the full-blown-CMS landscape, we find this an incomprehensible approach.

Chessboard, one of the Twenty Eleven default header imagesWith this additional tip we show you how to get rid of the entire WordPress header image, including the auto-generating of header sized images for each and every image you upload to your Media Library. Next to some additional code in the functions.php file, we replace the code in the header.php file with our own fixed image that basically can be any size we want it to be. Let’s face it, an image height of 288px takes up about one third of a normal screen, which in our opinion is a bit pushing it!

Open up your functions.php file and add the following lines (assuming you have an empty file):

<?php
// Make theme available for translation
// Translations can be filed in the /languages/ directory
load_theme_textdomain( 'child2011', TEMPLATEPATH . '/languages' );

add_action( 'after_setup_theme', 'child2011_setup' );
function child2011_setup() {
remove_custom_image_header( 'twentyeleven_header_style', 'twentyeleven_admin_header_style', 'twentyeleven_admin_header_image' );
}

// REMOVE TWENTY ELEVEN DEFAULT HEADER IMAGES
function wptips_remove_header_images() {
unregister_default_headers( array('wheel','shore','trolley','pine-cone','chessboard','lanterns','willow','hanoi')
);
}
add_action( 'after_setup_theme', 'wptips_remove_header_images', 11 );
?>

As you will see when you try out this code, this not only gets completely rid of all default header images, it also disables the annoying changing header images as soon as you upload a large image to a news article.

Now we can add our own image to the header, by adding it directly to the header.php file. In order to do so, copy the file over from the twentyeleven folder and drop it into the child2011 folder. When you open the file you can see that all the header image business is dealt with in the lines 78-113.

Basically the only lines we need are the link to the home url and the image, so we change the above lines into 3 simple lines:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    <img src="<?php echo get_bloginfo('stylesheet_directory'); ?>/images/wptips-logo.png" width="img-width" height="img-height" alt="" />
</a>

If we leave it like that however, we have 2 problems:

  1. No matter the size, our logo gets stretched over the entire width of the theme (i.e. 1000px)
  2. The site title as well as the site description are visible

re 1) If you take a look at your site with Firebug (a Firefox extension), you will see that your new header image gets a width of 100% on line 531 of the style.css (of the Twenty Eleven theme): #branding img {width:100%}

To change this we need to dive into our new style.css and change the width and the height and – while you’re at it – do something about the margins. For our test site we have come up with the following:

#branding img {height: 78px;margin-bottom: 10px;margin-left: 75px;margin-top: 10px;width: 268px;}

re 2) Fortunately Twenty Eleven comes with a theme option to hide the site title and site description. To change these settings go to Appearance in your Dashboard and then choose Header. There you will see an option that says “Display Text”. Choose “No” and save.

If you now visit your new site you will see that everything fits perfectly! And if you want to upload a large image in one of your Posts or Pages, go right ahead, it will not affect your site’s header image in any way!
child2011-header

Show off your Twenty Eleven child themes in the comments or ask any questions you might have!

66 comments on “Replace/Remove Default Header Image Twenty Eleven Theme

    • Hi Rev. Voodoo, thanks for your positive feedback! Although I wouldn’t implement it for myself, but I really like what you have done with the 2 sidebars on TwentyEleven. It’s actually quite a nice theme to work with, don’t you think? Keep up the good work!

      • Yeah, I’m having quite a bit of fun with 2011. Trying to figure out what I want to do next. I have a few requests for basic stuff, like working with fonts and whatnot. The 2 sidebar thing I have, I like it…. I’m not 100% sold on it though. I may go to a single sidebar in the future. Sometimes I think it’s too crowded, and sometimes I really dig it.

        • Perhaps you have noticed already that I have just last night switched themes here on WPTIPS, it’s now also running on a Twenty Eleven Child Theme :) It’s really nice working with this theme, but I have noticed some peculiarities with article header and footer: the entry-meta has a separate class in the header, but not in the footer, is a bit weird…

      • I noticed the twentyeleven base as soon as I left a comment! The comment area on 2011 stands out for sure! I hadn’t noticed the entry header and footer before…. I hadn’t gotten into digging in there yet, but now I’m checking that out!

  1. Hello!

    I first want to thank you for such a well written post. :)

    I’m in the process of beating the Twenty Eleven theme into submission and have two questions I’m sure you can answer.

    1. I want to add a custom header image to my Home, Portraits, Weddings, and Blog page to help with visual navigation. If you visit my site, you’ll see the same image on each page. I have the code set in my child-theme (style.css) ready to remove the page title, but need to be able to replace the header image first.

    2. I want to widen the main content of the single column page layout. I have created a template for these pages and want to make use of the wasted real estate on the page.

    As I mentioned, I have a working child theme installed with it’s own style.css, functions.php, footer.php, and page-master.php files. I need help figuring out how to update them to make these changes.

    Thanks in advance!

    • I probably didn’t describe question #1 very well. I’ve already “hidden” the page titles through the style.css file of my child theme. I’m referring to the actual header image directly above the main navigation bar. I’ve already changed out the theme header image for mine.

      What I want to to is have a different header image on each page depending on where the visitor happens to be on the site. For example, when they are on the Portraits Page, the header image will have my logo on the left as it does now, but it will have the word “Portraits” on the right where there is currently blank space. Same for Weddings, Blog, Home, etc.. I’ve created custom header images but don’t know how to get them to display properly. Any thoughts?

      I’ll try your suggestion on #2. Thanks. You da man! ;-)

      • As for #2, I foung this line of code in the twenty eleven theme:

        .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
        margin: 0 auto;
        width: 68.9%; }

        Is the only thing I need to do is place this in it’s entirety into the style.css file of my child theme and change the width to the number I desire? Or might I effect things other than the main content page width?

        Thanks.

        • From the Codex: Singular page is when any of the following return true: is_single(), is_page() or is_attachment().

          So, if you want to change the width for all those, then yes, copy the entire line to your Child theme’s stylesheet and adjust the width to your liking.

          If you however only want to change it for single Posts, then you have to change .singular into .single

        • Thanks again for the helpful information. I plan to visit your site often as it contains very good information.

          Also, I will keep your company in mind for future site work.

          Thanks again!

  2. Hi Bill, thanks for your compliment!

    re 1. you can remove the tile and description in the Header Settings. No need to manually delete them as it actually is better to keep them. Regarding the image, I don’t understand what you want. You can change the current image, right?

    re 2. I would like to suggest to use Firebug or sth similar so you can exactly see what line in CSS is responsible for what style. Then you will find that the entry-content class receives a width of 68.9% on line 112 of your stylesheet. Change it to something higher and you will see that your real estate widens.

    Good luck!

  3. Pingback: Wordpress: 3.2.1 und Twenty Eleven: Header Images | blog.lbernau-online.de

    • Hi Adam, thanks for your comment.

      Centering of the twentyeleven header image works the same as you center any header image :)

      open up your Child theme’s style.css and adjust it as follows:

      #branding img {
          display: block;
          height: your-img-height-px;
          margin: 10px auto;
          width: your-image-width-px;
      }

      You can also upload a full-width header image where you already have centered the image.

      Hope this works for you.

      • wow! you are magical, solved on one day what had postponed my website from being live for more than week now, thanks so much, I really appreciate your help :)
        website certainly bookmarked, keep the knowledge going. :)

        • Glad it worked for you, Adam.
          Keep in mind though that this has not an awful lot to do with the Twenty Eleven WordPress theme and WordPress as a whole for that matter. All this is, is CSS…

        • Hello again, I asked before how to center the twenty eleven header and it worked so well as showing here:
          inwriters.com

          Can you help me achieve the same look for buddypress bp-default theme? this is what happen when I change the header in function to 300*300 px :
          inwriters.com/fans/members
          as you see it’s repeated and doesn’t show in original size, while I want to make the header in both themes look the same, I hope you can help with that :)

          Also, Would appreciate if you told me in your personal opinion, what the best website, e-course or method online to be more into css and further php? or should I go for Academic courses only?

        • your header shows a background image as well as a gradient color, so you’ll have to decide which you want. If you want the image, then get rid of the rest and change line 40 of members css into:

          #header {
              background: url("http://inwriters.com/fans/files/2011/10/prince-words-header.gif") no-repeat scroll center 0 transparent;
              height: 300px;
          }

          A good source to start with learning CSS/HTML/PHP is http://www.w3schools.com/

        • Thanks again :) I needed some time to slow down from studying to fix things and the header is working now as desired and I got my website ready, feel free to see how things got and welcome to read my first story, as a little way to show my appreciation for your help, your website link now reside in my footer beside wordpress and buddypress, Thanks, have a good day :)

  4. I need help, my widgets will not display in the right place on all my pages, If I use firefox it is correct but not IE and most parents of this shcool will be using IE.
    Please help!!

    • Hi Mignon, first of all you have edited the Twenty Eleven theme directly, so if an update comes you will lose all your changes. Second you have changed some things in the code that do not make sense: div div=”” id=”main”

      If you take the original header.php of Twenty Eleven then you will see that on line 123 it just says div id=”main”

      After this the index.php should read (after the call for the header):
      div id=”primary”
      div id=”content” role=”main”
      primary is completely missing on your site.

      If you need help with recoding your templates (and doing it the proper Child Theme way) you can hire us via http://senl.in/0nLine

  5. This is a very helpful tutorial. After taking these steps is there a way to add ssome text and another image to the right of the logo?

    • Hi Ray, thanks for your comment.

      You can extend this for as far as you want. You can easily add another image and/or text, for example by adding a few classes to the div id branding. You probably would need to float the first image to the left for it to look better.

  6. Hi,

    I am new to Word Press and am developing some simple one page landing sites for my clients. I am a graphic designer.

    I am using the Twenty Eleven theme and have several issues to solve:

    1) I am hiding the site title under theme options and uploading my own art for the header. There is a thin grey line above my file on the header. How do I remove?

    2) How do I remove the search bar from the navigation area?

    3) I’m using the Showcase template, how do I remove “Recent Posts” from the bottom?

    4) Inserted photos and tables show with a thin grey line around them. How do I remove?

    5) Is there a simple way to change the background color of the page to something other than white or black? In Twenty Ten in the style.css wrapper the color could be changed. I don’t see that in this one.

    Thanks for any help you can offer. The site I’m referreing to is http://www.ArrangingInteriors.com

    Thanks!

    • G’day,

      I had a problem with that grey strip too. Adding this to the style.css seemed to work.

      #branding {
      border-top: medium none;
      padding-bottom: 10px;
      position: relative;
      z-index: 2;
      }

  7. Thanks. I tried adding under structure right before #branding hgroup (see below) but it didn’t work. Sorry I don’t know much about this. Can you tell me where to add it? Thanks!

    /* =Structure
    ———————————————– */

    body {
    padding: 0 2em;
    }
    #page {
    margin: 2em auto;
    max-width: 1000px;
    }
    #branding {
    border-top: medium none;
    padding-bottom: 10px;
    position: relative;
    z-index: 2;
    }
    #branding hgroup {
    margin: 0 7.6%;
    }

    • Hi Jan, thanks for your comments and apologies for the late reply, I was a few days out of town.
      Looking at your site, it seems you got everything working. One point of attention is that it would have been much better if you would have made a Child Theme instead of calling the Twenty Eleven theme “arranginginteriors”. If Twenty Eleven receives an update, you either loose all your customizations OR you will have to ignore the update(s) as long as you use the theme, not an ideal situation.

  8. Yes I eventually found answers to my questions. What I did was copy the Twenty Eleven theme from the server to my computer, rename it and then copy that back to the server. So I edited the copy and the original theme is still there. It was my understanding that the updates would not affected my copied theme. Is that right? Is it ok to do it this way? Thanks for your help.

    • Hi Jan, yes, you’re right, this way of doing it won’t affect your theme once an update becomes available.
      It however is not the best way to go as updates most of the times are a good thing. The best way is to make a Child Theme of Twenty Eleven as described in the top of this article (with a link to the Codex).

  9. I am currently creating my site on my local pc. I have implemented your code and everything works. However, the titles of my posts on the index page are showing the punctuation marks at the beginning of the title instead of the end. For example, what should be seen as “Hello World!” is being shown as “!Hello World”. Any idea of how this is happening? If I go back to the original 2011 theme of course the post titles are correctly shown.

    Thanks for your help.

    • Hi Bob, thanks for your comment. Without having any further details (like a link) the first thing that comes to mind is that you perhaps have a rtl.css (right-to-left) enabled?

  10. Thanks, this helped me a lot. Although I had to add the “11” after the (add_action( ‘after_setup_theme’, ‘wptips_new_default_header_images’ );)
    I have a few Header image-related problems I can’t seem to solve:
    Is it possible to define alt”” tag for the Header image inside of the php (or any other way?) Like for instance, if I do a google image search for my website name, my header image doesn’t come up in the search. can you think of a solution for that?

    Also: I notice that my new images don’t rotate randomly, even though the twentyeleven function is set to do that by default. Do you know how to control that?

    I’ve looked through codex and can’t find any parameters for register_default_headers other than url and description, and actually don’t know what the parameters for “description ()” are, so I just changed what was obvious.

    If I want all the headers to have the same alt, I suppose I could add that in header.php, but I’m curious if I can specify a different alt for each image. Hope this make sense.

    Thanks again

    • Glad it helped you. Yeah the “11” is mandatory as explained above.

      Not sure about specifying the alt tag, perhaps if you add a description to the image you upload?

      The rotating of the images only happens if you have a number of default images present. So that should work as long as you don’t rip that function out (what we have done in the last part of the tutorial, called a different approach).

      Furthermore to have your own images become the header image you need to upload it using the Featured Image within your Posts. Keep in mind that the size of the image needs to minimally be the size of the set header size, which is by default 1000 x 288px.

      You should be able to define the alt text of these images within the featured image upload menu.

      Hope this helps.

      • Hey, thanks for the reply.

        I was thinking an alt tag would be good for SEO, but I might be wrong. I’m talking about the header images that we coded in as per your instructions, not the feature image.

        Anyway, I ended up adding the following code to the (alt””) where the header image is loaded in the header.php file: <img alt="" /> it seems to work. (puts the name of the site as the alt.)

        Actually, I don’t want the headers to rotate so I’m glad they don’t. Just not sure what makes them rotate or not rotate (yet.)

  11. I have made some heavy tweaks to my 2011 child theme, what about the gap between the featured images and the content?

    I can’t figure out why it is there:

    I have set margin to zero padding to zeroo but it still shows up. I am about to pull my hair out on this one.

    • Hi Ken, thanks for your comment. I had a quick look at your site and saw what you mean.
      Now if you add a line-height of 0 to the featured-image id, you will see that that solves your problem.
      Hope this helps!

      • Thanks! What the heck was that all about, I’ve never seen that before. I did put a -7px on the bottom-margin and got the same effect, however your solution allows for more style flexibility.

  12. Awesome!

    Do you have an idea to add a link to the images via the functions.php, so when WP loads the images they link to i.e. an post or page?

    • Hi Paul, thank for your comment. Not sure I follow correctly. Basically you can change the URL of the header image on line 83 of the header.php file, no need to muck around in the functions.php file.

      • Ah, sorry I wasn’t clear at all. I mean that every image can point to a specific url. So actually exactly what it does right now but instead of all the images point to the same url an image can point to a specific post or page.

        • I don’t think it is impossible, but it would definitely require some hackery and trying stuff out. Make sure to get rid of lines 83 and 96 of your Child Theme’s header.php and then you need to start playing with what then has become line 93 (original 94). The complexity of it also depends on to where you want the images linked. Basically if you upload your own default header images, then they’re just that: header images. Your featured images can become your header images if you leave that function intact. But those only will show on the posts/pages where you have uploaded them. Good luck and please let us know with what you have come up!

        • The only way I would see to approach something like that is to pull out a lot of the header code, or heavily modify it. And then chaining together a string of conditionals. If this page and then display an image with link, elseif this page, another image with link, finally ending with else, and having that be the default header code or whatever. This technique would grow pretty long…. my php knowlege is fairly limited, so I tend to use what I know how to do that works…..

        • Thanks for your input @Rev, I was also thinking something along those lines, but was also worried that it then would become quite a long list, plus it is basically hardcoded and I am not sure if that is what Paul wants…

          Anyways, it seems that it’s back to the drawing-board for Paul :)

  13. Yeah I see what you guys mean… might be a better way to kill the header images and get something like the nivoslider in there, and let the wp-loop gather posts out of some category.

    Im going to think this over and play around with it. Thanks for your thoughts. When I have something I’ll let you know.

  14. many thanks for your post, but i need help for change the actual position of a search box, i need to move it in to a nav bar, like your.
    sorry for my english

  15. Pingback: Slider en cabecera para tema twentyeleven en Wordpress | Carlos Faria

  16. Thank you so much for this. I created a customer header in Adope PS (albeit a really elementary one…), but it was so annoying to open my page and see my Page Title, then my header with the same Page Title! lol. It was ridiculous, and I couldn’t figure out how the heck to get that off. Thank you! I’ve also learned how to delete the search bar. Yay.

  17. Hi,

    thank you for sharing your knowledge. I really like the twenty eleven theme. But the huge header image is terrible. I just edit the theme to update my blog theme soon. Will try tomorrow If it works :)

    Cheers
    Gordon

    • Hi Gordon, thanks for your comment. I completely agree with you about the size of the header image. Maybe (a big maybe) it can be nice for a personal blog, but for anything else, it just takes up way too much space! Glad that this tip could be of help to you.

  18. Pingback: Giving in to the excellence of the 2011 theme | Vintage Post Blog

  19. Pingback: 全新定制Twenty Eleven头部图片

  20. Pingback: 25K views on one single post!!! - WP TIPS

Comments are closed.