Making the Header on the Twenty Ten Theme Less Tall?

To make the header on the Twenty Ten theme less tall (i.e. a height with fewer pixels) put this code at the bottom of your theme’s “functions.php” file (being sure to change the number 180 to whatever height you want):

<?php 
add_action('twentyten_header_image_height','yoursite_header_image_height'); 
function yoursite_header_image_height($height) { 
   return 180; // Modify this to whatever pixel height you want. 
} 

Then you’ll need to go to “Appearance > Header” in your admin console and upload your new smaller image (here’s the URL to that admin page):

http://example.com/wp-admin/themes.php?page=custom-header

And here’s what that admin page looks like:

Screenshot showing WordPress Twenty Ten theme header iamge

You might also consider making your modifications on a “Child Theme” (if you have not already.) Here’s an article (that is overly complicated) but it’s really as simple as just creating a directory on your web server under the “/wp-content/themes/” subdirectory (I’d call it “/wp-content/themes/yoursite/“) and creating a “style.css” in that directory with the following:

/* 
Theme Name: Your Child Theme Name
Description: Theme for your-site.com 
Author: Your Name
Version: 1.0 
Template: twentyten 
*/ 
@import url("../twentyten/style.css"); 

Then you can create a new “functions.php” file and put the above PHP code in it rather than modifying the files in the directory of the TwentyTen theme and having to deal with doing it again it when Twenty Ten has a security update.

Leave a Comment