post

Twenty Ten Header

TaB is designed entirely on the Twenty Ten theme, that comes with WordPress. One of the things that I wanted to do with this blog, that I have not done before, was to change the look of the header area from the standard full-width header image and navigation menu paradigm. This involves a custom function to change the size of the header image and some CSS to pull it all together.

Change the Header Image Size

Custom Twenty Ten theme header layout, with the nav menu and image on the same line

Custom Twenty Ten theme header layout, with the nav menu and image on the same line

The default header image-size for the Twenty Ten theme is 940 pixels wide, by 198 pixels high. My idea was to split this in half, to make room for the navigation menu on the same line. The Twenty Ten theme uses two variables to control the size of the header image; twentyten_header_image_height and twentyten_header_image_width. You can set these variables to your own custom values using a pair of WordPress Functions.

/**
* Change the default header size to 470px by 48px
*
*/
function brick_header_height($size){
return 48;
}
function brick_header_width($size){
return 470;
}
add_filter('twentyten_header_image_height','brick_header_height');
add_filter('twentyten_header_image_width','brick_header_width');

It is always to good idea to document any custom function that you add to your WordPress theme, like I have done here in Lines 1 through 4. You will note that this is actually two functions; one to set a value for the height and a second to set the value of the width. An Add Filter takes the value from each function and returns it to the appropriate Twenty Ten theme variable.

CSS Modifications

By default, the Twenty Ten theme places a border above and below the header image. This is controlled by the #branding class, in the style.php file.

/* This is the custom header image */
#branding img {
border-top: 4px solid #000;
border-bottom: 1px solid #000;
clear: both;
display: block;
}

For my new custom header image, I did not want the borders and I wanted to float the image to the right-side of the page, to make room for the navigation menu. To do this, I modified the #branding class in the style.php file of my child theme (for more information about child themes, see Customizing the WordPress Twenty Ten Theme).

#branding img {
float: right;
border-top: none;
border-bottom: none;
}

Next, I turned to the navigation menu CSS which is controlled by the #access class.

#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}

The Twenty Ten theme uses a black background for the navigation menu, along with a full page-width of 940 pixels. For my design, I needed to change the background to white and the width to 470 pixels, or half of the page-width. The navigation menu is already floated to the left, so I did not have to make any changes, there.

#access {
background:#ffffff;
width:470px;
}

Many have been confused by the new WordPress 3 architecture and, more specifically, the object-oriented design of the Twenty Ten theme. Once you understand the relationship between variables and the functions that use them, however, the Twenty Ten theme can be an excellent platform for creating your own designs.

23 thoughts on “Twenty Ten Header”

  1. I hacked my header image the way you teach. How would I move the menu/nav bar on above my header instead of sitting below it or beside it?

    Ex: blairwilliams.com

    • I have not done that, Rong, but I can point you in the right direction. Copy the #access style from the Twenty Ten style.css file into your child theme’s style.css file:

      #access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}

      Then change the “background” style to your image:

      background: url("images/yourimage.png") no-repeat scroll left top;

      You will probably then want to style the #access li and ul elements to contrast with the new background..

  4. Hi – very useful post – thanks

    One question – I would like to have a different sized header image (larger by height) – only on the homepage (all other header images on other pages would stay at the existing size) – any advice?

    thanks

    Iain

  5. Thank you, these instructions were so easy to follow, I actually thought this was going to be more difficult than it actually was! So far I’ve used a number of helpful posts on your website to successfully make changes to my twenty ten theme.

  6. Hey Roy,
    I changed the header image size but it doesn’t center, so now the header is 40px to the right (980px header ) . I’ve tried changing things but can’t seem to find what the right thing is to change. I’ve got a child theme.
    Any thoughts?

  7. Hi Roy,

    I just setup my second twentyten based wp site and can not get my child theme to work. I’ve tried everything. Gone through this tutorial twice word for word too. The strange part is that my child theme setup in the same way works great for my other wp site on the same server. I even tried copying that on and changing the variables but still didn’t work. Directly editing the original twenty ten theme does however work fine on my new site, just not the child theme. Any thoughts on what could be the problem here??

    Thanks for your help and this site too.

  8. Hi Roy, thanks for all of this brilliant and inspiring content. One question: when you changed the background of your nav menu to white, how did you change the color of the links so that you can see them on the white background? Also, how did you alter the hover etc properties of the links?

    Many thanks.

    • Hi Tim – I changed the menu links to my blue color in the #access a class, with the orange hover color (to match the Twenty Ten title links) in the #access li:hover > a, #access ul ul :hover > a class. Also, I changed the background color of the whole menu to white, in the #access class. I can send you the CSS, if you’d like.

      • Hi Roy, thank you for that advice, and it would be fantastic if you could send the CSS. That would be a great model for me to adapt to my own color scheme. Thanks once again for this great resource.

  9. this is exactly what i was looking for! however… i cant figure it out – which file do i look for this in? i am looking in header.php and style.css but cant seem to find the code for changing the header size in either of them. thanks.

    • The custom function code needs to be added to your child theme’s functions.php file and the corresponding CSS code to your child theme’s style.css file.

  10. Hi,

    There is some great great information on here, a really valuable resource for anyone working with Twenty Ten.
    I’m working on a design where I would like to keep the header image in place but also have a separate logo image with a live link to the home page in the same area but floated left.
    Would I need to add a div to header .php? Any advice is appreciated.
    To give you an idea:

    Cheers,

    James

    • James – if you cannot steal the site title or description divs then, yes, I think adding a new div would be the way to go.

  11. Here’s another question for you, this one beyond the scope of what you wrote about here:

    Do you know if it’s possible in twenty ten to decrease the width of the header image like you’ve done here, but then keep it on the same line and bring the sidebar up alongside the float:left header image?

    I like how much you’ve customized the twenty ten theme, and this was a fantastic article–super helpful. Thank you!

    • Matt – I briefly looked into that, because I’m planning to switch my other blog (on the Thesis framework) over to the Twenty Ten theme, over the Christmas break. At first glance, it does not look like there is a way to do it because the content class controls both the main content area and the sidebar. I did not get very far into it yet, though, so I have not given up.

      • I know…I saw that connection and was stumped.

        One idea I had was to minimize the image section of the header and then try to use the header image as the top of the left content section on each page…I’m trying to figure out if that’s possible without being too much of a headache.

        Thanks for replying, and I’ll let you know if I figure out a way to do it!

Comments are closed.