Support » Themes and Templates » Twenty Ten Theme – Header Image Bug?

  • I find the header image of the Twenty Ten theme takes too much vertical space so I configured the theme to remove the header image.

    What happens is image is gone but a big blank space is left between the top menu bar and the separator line below the blog title and description.
    That’s in Firefox. In IE it also display a broke link image in the blank space.

    What I expected to happen was the image to be gone and the space it would have taken to be gone as well. I want menu bar to be displayed just below the separator line.

    Any chance of getting this corrected in an update of the theme?

Viewing 15 replies - 1 through 15 (of 15 total)
  • esmi


    Forum Moderator

    I think it’s far more likely that the issue lies in your changes. A link to your site would help to confirm this.

    Thanks for responding.

    The only change I make is to click the “Remove Header Image” button on the Custom Header configuration page reached by Appearance>Header. Then “Save Changes”.

    Given there’s a specific button to remove the header image one would think that the header area would adjust to compensate for a lack of image.

    Any other suggestions welcome.

    It looks like this post addresses the issue by cutting out code in header.php.

    But that’s kind of a brutal method. BTW you need a editor that understands PHP well enough to recognize lines. You need line count in order to figure out which lines to cut. Something a typical WP user isn’t likely to have.

    The “Remove Header Image” button, as it currently works, is wrong in leaving the big white space. What’s the point in removing the image if it still leaves the space. If you think of the big white space as an image of white space then it didn’t really remove the image. It just replaced the non-white image with a white image. Again that’s not removing the image. Certainly not what the majority of WP users would expect when using the button.

    the code that causes the empty space to stay is that img tag in header.php:

    else : ?>
    						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    					<?php endif; ?>
    			</div><!-- #branding -->

    to make it universal to collapse the whole img tag if the header image is removed in the backend, another if statement could help (it will check if header_image() is not empty before showing the img tag):

    else : ?>
    	<?php if( get_header_image() ) { ?>					<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> <?php } ?>
    					<?php endif; ?>
    			</div><!-- #branding -->

    Thanks for this code alchymyth.

    Currently this code works to remove the large white space when I remove the header through the Admin panel. However, the menu bar also is removed.

    Can anyone explain how to do the above while preserving the menu bar?



    If you don’t want header images at all in your version of this theme, then do the following:
    1. Make a backup of header.php
    2. Remove everything from/including line 57 to/including line 66.

    This will remove any image from your header and allow the header to be just the title and the nav.

    If you don’t like it, restore back to the backed up version of your header.

    If you screw up, just redownload WP3.0 and get header.php from wp-content/themes/twentyten/header.php

    Good hunting.


    are you using the TwentyTen default?
    have you edited the header.php before?

    or does your theme have a different html structure?

    link to your site?

    you could paste the code of your header.php into a and post the link to it here.

    @wprelief I actually want to keep all the functionality of adding a header and changing a header through the dashboard interface. What I don’t want is to have users that remove header through the dashboard to be faced with a large white spot where the header image used to be.

    So, basically, if the header image is removed through the dashboard then it would be great if the header spaced collapsed but maintained the navigation bar. With the handy if statement listed above, I lose the image AS WELL as the navigation bar–users that don’t want a big header image are faced with no navigation bar as well.

    I do have some users who will want the header image and navigation–so removing the code is not an option.


    I am using the thirtyTen child theme. However, I am making this change on the TwentyTen level, since I want to to apply to every child theme that uses TwentyTen. I am aware I may have to make changes again if I update TwentyTen.

    I’d give you a link to the site—but it is private academic right now, so I can’t. I have pasted the header.php here.

    Thanks for your help.


    I should also say I used a slight variation of your if statement in my code, but I did originally do it as listed above, and had the same result.

    I am open to any revised code ideas you may have.

    i can’t see any reason in the code, why the div #access with the menu would be effected by the dissappearing header image;

    unless there is some connection through the styles, that would cover the menu:
    can you check in the html code in the browser, if the div #access and the menu is still there?

    (it is always a little bit more complicated to guessing what could be wrong – if the site is private; four eyes usually do see more than two)

    i didn’t post this immedeately, and instead downloaded and installed ThirtyTen – and as i thought: he moved the menu relative up to show at the uper end of the header image (different from TwentyTen where it shows below the header image)

    see in style.css of ThirtyTen:

    /* Move menu to be above image */
    #header #access{
    top: -240px;
    position: relative;

    unfortunately, this makes the ‘automatic’ header image on/off more difficult, as you may need to compensate for this with an embedded style somewhere.


    I should also say I used a slight variation of your if statement in my code

    yes, and a splendid good one. you really added this condition seemlessly into the existing code 😉


    Thanks for your help! Indeed, I simply changed the CSS:

    /* Move menu to be above image */
    #header #access{
    /* top: -240px; */
    position: relative;
    margin: 0 20px 0 0;

    And the navigation bar came back below the image, which is okay with me. This all works with the if statement. Thanks for your help, and taking the time to download the ThirtyTen theme. I really appreciate everything.

    Seems like this topic has been resolved and then some!



    I’m trying to remove the space and the Menu bar from this theme. I tried the if statement in the header.php but nothing has changed. I’m perplexed. I must be missing something but can’t figure it out. Any help appreciated.


    you could use a css solution:
    #branding img, #access {display:none;}

    or edit header.php, and remove all the code that you don’t need:

    					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
    					if ( is_singular() &&
    down to
    (); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    					<?php endif; ?>


    <div id="access" role="navigation">
    			  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    down to
    nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    			</div><!-- #access -->

    Sheesh sometimes I can be sooo dumb.. I copied this theme to a different folder but it seems that Wp is using the original folder.. I need to switch that. Thought I had.

    It looks like I am using the new folder as it shows as current in the dashboard.. However when I look at the source it shows it is using the old folder.

    ok i learned a lot about wordpress structure loops php the guy with the beard and alchymyth today. and that the word itself it holding an oximoron —- al =anti — chymyth == chemestry , myth = myth. there’s a big disccution between matter and spirit which is not even anti-matter ok im tired good night

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Twenty Ten Theme – Header Image Bug?’ is closed to new replies.