Change Dimensions of WordPress Custom Header

  • Is there a way to change the default dimensions for WordPress Custom Header application? The theme that I chose to use had a default header image size of 774×120 which was the full width of the site. I thought this was too small so I went in to the css file and adjusted the page size to 900px wide instead.

    I was able to tweek the header in the css to 900×160 and manually entered a link to an image of that size

    #header {
    background: url(https://localhost/wordpress/wp-content/uploads/2011/05/header.png) top center no-repeat;
    height: 160px;
    width: 900px;
    border: 0px #fff solid;
    }

    But the wp header wont let me upload an image no bigger than the defaulted size 774×120. I also tried taking the this line of code out of the header.php

    <?php wp_head(); ?>
    </head>

    which allowed the custom css header to show through but I ended up having the extra code at the bottom of the page of where the wp dashboard menu should be.

    Is there a way to modify the wordpress header application so that my header stretches all the way across?

    Thanks in advance

Viewing 5 replies - 1 through 5 (of 5 total)

  • Find on line 103 of functions.php:

    define(‘HEADER_IMAGE_WIDTH’, 900);
    define(‘HEADER_IMAGE_HEIGHT’, 160);

    change the sizes to whatever width and height you want.

    Add this or whatever id your header has to your style.css:

    #custom_header {
    width: 900px;
    height: 160px;
    }

    Upload your custom header to the proper image folder, likely under ‘your theme’ ‘images’

    Mark sure your widths and heights match and it should work like a charm!

    henrik hjort

    (@henrik-hjort)

    First off: I’m not a programmer!

    I was looking to solve the same problem. Finally I found the solution by going to the “functions.php” (my theme at the time birdsite).

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 760 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 200 ) );

    By changing the values here I could keep the functionality of the theme (auto crop etc.) and define the size like I wanted.

    Thanks to “rodlaf”

    Beginners (like me):
    at this point we’re talking about making admin-level changes from Dashboard/Appearance/Editor/. The files we’re working on are Theme Functions (located at /functions.php) and Stylesheet (stylesheet.css).

    Theme Functions (functions.php) has the user-level information that appears on the user-level custom header image dialog:

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 760 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 200 ) );

    Changing the image dimensions there simply changes the instructions to the end-user as to the optimum format for direct (no cropping) upload of an image. But this is informational only: it doesn’t change the crop settings deeper in the custom header, and it can say whatever it wants without affecting the crop function one bit.

    As noted by rodlaf, you must also add a custom style entry in your stylesheet.css file for your newly-sized default header image:

    #custom_header {
width: 900px;
height: 160px;
}

    Except, as he notes, “#custom_header” should read whatever’s in the functions.php file. In my case using the MistyLook theme, the magic substitute word/term was “#HEADER_IMAGE”.

    Resize the Header in a Twenty Eleven Child Theme

    I did what rodlaf recommended in step 1, and for step 2 simply changed the following code in style.css:

    #branding img {
    height: 150px;
    margin-bottom: -7px;
    width: 100%;
    }

    Height was set to “auto” so I just changed it to 150pix. It worked!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change Dimensions of WordPress Custom Header’ is closed to new replies.