How to Create Flexible Header Images in WordPress 3.4
- Enabling Flexible Header Support in Your Theme
- Using Flexible Custom Headers
- That's It, You're Done!
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
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).
- Add the following code before the closing ?> tag in your functions.php file:
- Click Update File to save.
- Open the header.php file in the editor and find the section of the code that displays your header text or image.
- Replace the code displaying your header text or image with the following code:
- Click Update File to save.
)
Figure 2 You can find your functions.php and header.php files in the sidebar of the built-in theme editor.
add_theme_support( 'custom-header', array(
// Flex height
'flex-height' => true,
// Recommended height
'height' => 200,
// Flex width
'flex-width' => true,
// Recommended width
'width' => 1000,
// Template header style callback
'wp-head-callback' => $wphead_cb,
// Admin header style callback
'admin-head-callback' => $adminhead_cb,
// Admin preview style callback
'admin-preview-callback => $adminpreview_cb
) );
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?> " width="<?php echo get_custom_header()->width; ?>" alt="" />
For more information on the default settings and their options, check out the "Custom Headers" article on the WordPress Codex.