Making the Header on the Twenty Ten Theme Less Tall?

2 comments

1. 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:

   

   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.

   Log in to Reply

2. I cheated and used css in the style.css file
   Mike’s method is better if you want let users edit the header.
   I turned that feature off altogether.

   Log in to Reply