Pen + Pigeon / notebook

The Twenty Ten theme is very flexible and super easy to use, but there are few cosmetic/structural changes that I think a lot of people may be inclined to make right off the bat, so I thought I’d share them here:

• Remove the black borders from the header image
• Use any size image header
• Use a vertical menu in the sidebar instead of a horizontal one in the header

Remove the black borders from the header image

These borders are set in the functions.php file and (as of version 3.01) not included in your style sheet by default. So to override the properties in functions.php you need to add the following border definitions to "#branding img" in styles.css (again, if "#branding img" is not already there, just add it):

{ border-bottom: 0px solid #fff;
border-top: 0px solid #fff; }

This is probably overkill of course – you can just set the border to 0px and that will suffice to remove it – but I’ve included the border style and colour for the purpose of this example in case you want to simply change the colour or weight of the border (say, to something like "2px solid #333"), rather than remove it all together.

Use any size image header

In functions.php, locate the following and change the width and height to the exact dimensions of your header image:

add_filter(‘twentyten_header_image_height’,'my_header_height’);
add_filter(‘twentyten_header_image_width’,'my_header_width’);

function my_header_height($size){
return 290;
}
function my_header_width($size){
return 1020;
}

When you go back to Appearance > Header, the Upload Image section will ask for an image of the size specified above.

Source: this thread.

Use a vertical menu in the sidebar instead of a horizontal one in the header

1. Create a custom menu.
   1. In the admin panel, click Appearance > Menus.
   2. Enter a menu name and click Create Menu.
   3. Drag and drop the Pages you want to include in your menu, from the left-hand side to the menu tab on the right-hand side.
   4. Under Theme Locations, select the name of the new menu from the drop-down list and click save.
   5. Click Save Menu.
2. Add the custom menu to the sidebar.
   1. Click Widgets.
   2. Drag the Custom Menu widget to the Primary Widget area (or secondary widget area, if you have this and depending on where you want the vertical menu to appear.
   3. Select the menu from the drop-down list and click Save (a title is optional).
3. Hide the original header menu. In header.php, locate the original menu (it will most likely be between <!– #branding –> & <!– #access –>) and place comment tags around it, like this:

<!−− <div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( ‘Skip to content’, ‘twentyten’ ); ?>"><?php _e( ‘Skip to content’, ‘twentyten’ ); ?></a></div>
<?php /* Our navigation menu. If one isn’t filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>
</div> −−>

4. Put a div wrapper with a distinct id or class name around the second menu in order to style it in your style.css file. How you style your vertical menu is up to you, but you can find some good articles here and here that you can use as a starting point.

If you have any questions please leave them in the comments section and I’ll do my best to help.