• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

Header Image

Reader Interactions

Comments

  1. Romeo says

    December 8, 2013 at 4:14 am

    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’.

    Log in to Reply
  2. Dan Laird says

    October 31, 2013 at 7:03 pm

    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.

    Log in to Reply
    • Brad Dalton says

      October 31, 2013 at 7:10 pm

      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.

      Log in to Reply
      • Dan Laird says

        October 31, 2013 at 7:14 pm

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

        Log in to Reply
        • Brad Dalton says

          October 31, 2013 at 7:40 pm

          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.

          Log in to Reply
      • Dan Laird says

        October 31, 2013 at 7:23 pm

        … any education discounts? 🙂

        Log in to Reply
        • Brad Dalton says

          October 31, 2013 at 7:39 pm

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

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

          Log in to Reply
        • Brad Dalton says

          October 31, 2013 at 7:42 pm

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

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.