From the author of

From the author of

If your WordPress theme supports custom header images, you already know how easy it is to add a unique image to the header portion of your site. But since the dimensions of those images are set by the theme designer, you've been stuck finding an image that will fit in that spot and still look awesome (see Figure 1). That is, until now!

Figure 1 Some images are visually confusing once they've been cropped (top). Having flexible header-image sizes means that you can choose the best crop size for your image (bottom).

The WordPress 3.4 update allows themes to support flexible header sizes. Theme designers can set up flexible header images with just a few lines of code, and the end user can swap in header images of any size—without needing any hacks or code tweaks.

Interest piqued? Great! I'll walk you through the process of enabling flexible header images in your theme, and then I'll show you how to use this feature to make your site truly unique.

Enabling Flexible Header Support in Your Theme

Roll up your shirt sleeves; this bit requires some code! Don't worry; it's mainly just cut-and-paste. You'll need access to your functions.php and header.php files. If you're not comfortable editing these files, look for a theme that natively supports flexible header images, and skip to the second section of this article.

CAUTION

ALWAYS back up your functions.php and header.php files before making any changes!

Let's get started:

Log into your WordPress Dashboard
and choose Appearance > Editor.

In the Templates list on the
right side of your screen, click
Theme Functions (see Figure
2).

Figure
2 You can find your functions.php and header.php files
in the sidebar of the built-in
theme editor.

Add the following code before
the closing ?> tag
in your functions.php file: