Changing Custom Header Image Sizes In Different Themes

I’ve already written about how to change the header area height & width in Genesis. This also applies to StudioPress themes as they are all built on this framework.

Lets also take a look at how to change the header area size (Width & Height) for other themes.

Change Twenty Eleven Header Height

You can easily change the header width and height for Twenty Eleven in the theme’s functions.php file.

You can see the width and height set in this screenshot for the custom header image.

Change Custom Header Size Twenty Eleven

You can easily change the header image width and height to your own needs.

Best practice dictates you create a child theme and place any custom coding in this child theme. This way your coding changes won’t get over written when  you update the parent theme.

When using a child theme you can override certain functions (those wrapped in a function_exists() call) by defining them first in your child theme’s functions.php file. The child theme’s functions.php file is included before the parent theme’s file, so the child theme functions would be used. Source: WordPress.org

You’ll notice once you change the size in your themes functions.php file, the size will also change when you go to Appearance > Header.

Header Size

Change Twenty Twelve Header Size

Twenty Twelve has included a special custom-header.php file which you’ll find in the includes folder.

You can simply change the width and height here.

Custom Header PHP File

Backup and consider using a child theme to avoid loses of custom coding after updating the parent theme.

Note the flexible height and width support that’s been added to Twenty Twelve.

In most cases, you may not need to modify your header image size now that Twenty Twelve includes support for flexible header sizes.

Change Genesis Header Image Sizes

Genesis includes different code for the site title, partial & full width image and header right widget.

Here’s a post which takes you step by step through all the code which needs to be changed for all images added to the header area including your logo.

8 responses to “Changing Custom Header Image Sizes In Different Themes”

  1. So cool! You have saved me a million years learning this one and applied it to one of my client’s issue. Cool! Thanks for your wonderful and helpful tutorial/post. I really appreciate your time teaching us the ‘how-to’.

  2. Dan Laird Avatar

    So, I have a child for 2012, and I copied the inc folder over with the custom-header.php file. I change the height from 250 to 123, and it doesn’t take affect in the template.

    1. Brad Dalton Avatar
      Brad Dalton

      Only copy the header.php file over.

      If you want to make life easy for yourself, try the Genesis theme framework with a free child theme like the Genesis Sample theme.

      Significantly easier to customize.

      1. Dan Laird Avatar

        Thank you! I’ll take a look, I’m all about making life easier, thanks Brad!

        1. Brad Dalton Avatar
          Brad Dalton

          I’ve written several hundred tutorials about how to customize StudioPress themes and there’s a huge amount of resources out there ponce you own the Genesis theme framework which all SP themes are built on.

      2. Dan Laird Avatar

        … any education discounts? 🙂

        1. Brad Dalton Avatar
          Brad Dalton

          Just added a link to my nav menu which will help.

          Only applies to returning customers so you will need to get something first.

        2. Brad Dalton Avatar
          Brad Dalton

          I offer one hour of free customization (PHP and CSS) for anyone that buys Genesis and installs a SP theme over the top.

Was This Tutorial Helpful?