• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

Last month WordPress released version 3.4 and with this release came some really cool new features. I am sure many of you already updated to new version and are aware of these new features. A quick overview of what is new in this release:

  • Theme Customizer, allows you to set theme options without activating a theme on your live website.
  • Theme Previewer, enabled users to see a live preview of theme without saving the changes.
  • Allowing HTML in Image Captions.
  • Support for Twitter Embeds so now you can embed a single tweet by just pasting its URL.
  • WP_Query optimized for faster performance on large databases.
  • And lots of other improvements.

The feature I liked the most was flexible custom header images. With this feature, now a user does not need to worry about getting their images into the exact sizes to be used as header images. The height and width of header images can now be easily adjusted.

Adjust Height and Width of your Custom Header Images

Flexible sizes for custom header images means that now you can upload an image to your server and then crop and adjust it to be used as header image with your theme. Why this feature is so useful?

  • The rigid requirements of using an image of an exact size to be used as header image made it difficult for people to customize their header images.
  • The header images were sometimes too tall and on some screen resolutions users were required to scroll to see the content.
  • If you changed your theme you had to upload your header image again. Now you can use an image from media library as your header image.
  • For users of TwentyEleven and TwentyTen themes this feature provides more control on the customization of these two widely used default themes.

Uploading and Cropping a Flexible Custom Header

For the sake of this post I have created a header image of 800 x 250 px. The default header image size is 1000 × 288 pixels and our image is smaller in height and width. Before you proceed to try this new feature make sure you have updated your theme as well. There are updated versions for both TwentyEleven and TewentyTen available check for updates and install latest versions. If you are using some other theme make sure your theme has the support for this new feature.

To upload the image we go to Appearance -> Header and upload our image.

Then we crop it to our liking

And Here is how it looks

Adding Support for Flexible Custom Header Images in Themes

This feature requires you to add support for it in your Theme’s functions.php using the add_theme_support(). Most active theme developers have already updated their themes or are in the process of doing so, meanwhile if you are feeling adventurous and want to do it yourself here is how it works.

$args = array(
	'default-image'          => get_template_directory_uri() . '/images/header.jpg',
	'width'                  => 1000,
	'height'                 => 288,
	'flex-height'            => true,
	'flex-width'             => true,
	);
add_theme_support( 'custom-header', $args);

In this code $args is an array containing the settings for custom header. We have set a default image to be used this is the header image in our theme’s images directory. We have set the width and height for the default image. This will also be shown in the Custom Header screen as the suggested height and width. We have then set height and width to be flexible. Simple isn’t it?

Replace the width and height with your current theme’s default header image’s width and height.

Theme developers can make this feature backward compatible for previous versions of WordPress, to do that we are using a short non-WordPress function is_wp_version borrowed from WikiDuh:

// checks is WP is at least a certain version (makes sure it has sufficient comparison decimals
function is_wp_version( $is_ver ) {
$wp_ver = explode( '.', get_bloginfo( 'version' ) );
$is_ver = explode( '.', $is_ver );
for( $i=0; $i if( !isset( $wp_ver[$i] ) ) array_push( $wp_ver, 0 );

foreach( $is_ver as $i => $is_val )
if( $wp_ver[$i] < $is_val ) return false;
return true;
}

$args = array(
	'default-image'          => get_template_directory_uri() . '/images/header.jpg',
	'width'                  => 1000,
	'height'                 => 288,
	'flex-height'            => true,
	'flex-width'             => true,
	);

if ( is_wp_version( '3.4' ) )
	add_theme_support( 'custom-header' , $args);
else
	add_custom_image_header( $args );

Images for Flexible Custom Headers in WordPress

The problem with this feature is that the images you upload are in different sizes and cropping them you may lose quality and images will look slightly blurred. In most tutorials across the web you will see people using photos in header images. I feel that photos usually don’t work right away.

In order to use an image as your website’s header you will have to prepare it first in photoshop. Make sure you get it as close to the recommended Width of the image without losing quality.

Using gradients and patterns in headers is also a safe bet as you cropping them you can select just an area of the image without losing quality.

Conclusion

I loved this feature particularly because it makes things flexible instead of rigid. That’s why people use WordPress for its flexibility. For users who are not good with photoshop this feature allows us to use different images and see what fits our needs best.


Post Tags

Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

5 Comments

  1. Hello my current theme is not supporting custom headers and i tried to install wp display header when i try to activate the plugin i get this message:

    “Your current theme does not support Custom Headers.”

    how can i fix this issue, any suggestions?

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors