Thord Daniel Hedengren - Smashing WordPress_ Beyond the Blog-Wiley (2014)

(avery) #1

148 PART II • Designing and Developing WordPress Themes


the header size there. Add default-image too to show a default header when none is
uploaded, which you need to make possible, by the way, by ensuring that the uploads
parameter is true. Here is such a header:

$args = array(
'width' => 960,
'height' => 120,
'default-image' => get_template_directory_uri(). '/img/header.jpg',
'uploads' => true,
);
add_theme_support( 'custom-header', $args );

Note that $args is used rather than $defaults because $defaults is a poor name to use.
Here you have a header width and height of 960 x 120 pixels. You’ll get the default image
should none be provided from your theme’s img folder, the header.jpg file there, and finally,
you’re allowing uploads. This is a pretty common header setup, but sometimes you want more
freedom in your header images. Chances are, you want the header image to be any width, but
perhaps a fixed height, such as a logo in the header rather than a typical blog header image,
for example:

$args = array(
'flex-width' => true,
'width' => 240,
'flex-height' => false,
'height' => 120,
'default-image' => get_template_directory_uri(). '/img/header.jpg',
'uploads' => true,
);
add_theme_support( 'custom-header', $args );

Here you’ve got the preferred header size at 240 x 120 pixels, but you’re allowing other widths
because flex-width is set to true. For clarity’s sake, flex-height is included and set to
false.

Adding the header image to your theme is easy enough using header_image(), which will
pass the image URL to be used in an img tag, for example. The following is a simple imple-
mentation of the header image for use in a theme, with dynamic width and height values from
the header image of choice:

<img src="<?php header_image(); ?>" height="<?php echo
get_custom_header()->height; ?>" width="<?php echo
get_custom_header()->width; ?>" alt="" />

Header images are powerful tools that can be used for a lot more than just a traditional blog
header image. Remember that when you’re creating your sites.
Free download pdf