How to Increase the Header Height in WordPress

Specifications for the visual elements of a WordPress blog are contained in various PHP and CSS files located in the "wp-content" directory of a WordPress server. By modifying the "header" and "headerimg" settings in these files, you can adjust the height of the header that appears at the top of your blog.

Instructions

1. Open your blog's "header.php" template file. This is located in a subdirectory of the /wp-content/themes/ directory on your WordPress server; if you are using the Classic theme, for example, the file you want is at /wp-content/themes/classic/header.php.

2. Find the "#headerimg" style settings. These will look something like this:

   #headerimg {

   margin: 7px 9px 0;

   height: 192px;

   width: 740px; }

   Change the number after "height" to specify a new height for the header image -- the primary content of the header. Save the file.

3. Open the "styles.css" file, located alongside "header.php," and find the "#header" style settings:

   #header {

   background: #90a090;

   border-bottom: double 3px #aba;

   border-left: solid 1px #9a9;

   border-right: solid 1px #565;

   border-top: solid 1px #9a9;

   font: italic normal 230% 'Times New Roman', Times, serif;

   letter-spacing: 0.2em;

   margin: 0;

   padding: 15px 10px 15px 60px;

   }

   Again, change the relevant numbers to modify the size of the borders and padding on the top and bottom of the header, thus changing its height.

4. Check the "styles.css" file for "#headerimg" settings. Not all WordPress themes include these settings in the CSS file, but many do. If yours does, change the numbers in it to match those you set in "header.php" and save the file.

5. Experiment with different header sizes and styles -- you may need to undergo some trial and error before you find the ideal settings for your blog.

References

• WordPress Codex: Designing Headers