Roadstar's Utility Blog: Custom Header: Twenty-Eleven Child Theme

Custom Header: Twenty-Eleven Child Theme | randyzwitch.com

http://randyzwitch.com/custom-header-twenty-eleven-child-theme

Changing header image and size

Of all of the great things about the WordPress Twenty-Eleven theme, the one thing I can’t understand is why WordPress decided to make the header image so damn big! There is the option to change the image you display to any number of provided images, or upload your own as part of the Appearance > Header menu. But you can’t change the size…if your upload is too short, the theme will stretch it for you, distorting the image. If your upload is too large, you’ll have to crop it. Luckily, with a minor modification we can change that.

First, go your newly created header.php file and find the following code:

<?php // Check to see if the header image has been removed

$header_image = get_header_image();

if ( ! empty( $header_image )) :

?>

view raw custom-header-1 This Gist brought to you by GitHub.

What we’re going to do is use the commenting tag in HTML to “comment out” the portions of our header code that we no longer want to be active (i.e. the re-sizing feature in the Twenty-Eleven theme). We can do this by adding the following tag (a left arrow, and exclamation point, and two dashes):

<!-- Comment out WordPress header checking

<?php // Check to see if the header image has been removed

$header_image = get_header_image();

if ( ! empty( $header_image )) : 

?>

view raw custom-header-2 This Gist brought to you by GitHub.

You’re not required to put in the “Comment out WordPress header checking” text as I did, but it is good practice to notate why changes have been made to your code. A little documentation now goes a long way a year from now, when you can’t remember why you changed something! Now that we’ve got the opening tag for commenting, we need to find the end of the code we want to comment out, and put the closing tag. Once we do this, all of the code between the commenting tags will not get executed by our browser.

<?php endif; // end check for removed header image

?>

End of RZ commenting out -->

view raw custom-header-3 This Gist brought to you by GitHub.

The closing tag above is the two dashes, then the right arrow. Again, you don’t have to write “End of RZ commenting out”, but it’s good for documentation. Save your header.php file to make the completed changes.

Hey, now I don’t have ANY banner!

If you refreshed your blog at this point, you’ll realize that not only did we get rid of the massive size of the banner, we got rid of the banner overall! That’s not the goal of this tutorial…so let’s add the banner back, except now we’ll control the sizing.

First thing you need to do is make sure you have the banner you want uploaded to your server, and that it is the size you want. This blog is 1000 pixels wide at the body (white space), and I decided to make my banner 225 pixels tall, because that’s where the picture looked good.

Once you have your banner location, we need to add the HTML link to our image, using the image tag. For the “alt” section, you should put a description of what your banner represents, as this will be displayed if the users browser can’t download the image. In the “src” section, add the location of your banner file.

<img src="http://randyzwitch.com/wp-content/themes/twentyeleven-child/images/butlers-wharf.png" alt="randyzwitch.com

header" />

view raw custom-header-4 This Gist brought to you by GitHub.

Once you hit save, that’s it! You now have control over your banner image. Yes, modifying the code in this manner disables the Appearance > Header functionality in the theme, but that’s a small price to pay to get flexibility. If you want to change your banner in the future to show a different image, you’ll need to do so in the header.php file. But since you’ve documented this change in your code, you’ll know where to look and what to change when that time comes…