Jeca Design | Web & Print

WordPress: Custom Header Image for Each Page / Post

  • Custom Header Image for Wordpress
  • Custom header image for Wordpress
  • Custom header for Wordpress

One of our top requests for customizing WordPress, is giving the article author/user the ability to use a unique image as the header image for a specific page or post. Let’s take a look at an example.

Pre-Req – Requires a beginner’s level knowledge of the following

  • WordPress 2.9+
  • HTML
  • PHP

On this site we have control over what images are displayed in the slider above.  The author of the site can now create new pages and add their own images to the slider without having any HTML or coding knowledge. This tutorial does not cover how to make the images slide.

Custom header image for WordPress

Slider contains custom image for each page!

In the past we would need to add some custom code to the functions.php file in order to create a custom field for posts/pages. Then the author would have to upload the image, copy the URL of the image, and finally paste the URL into the newly created custom field. In this example, we will still have to edit the file function.php and our theme’s header.php file. This is not terribly complicated, but trying to teach someone not accustomed to WordPress how to use custom fields can become a nightmare. Using this method will allow someone to add a custom header image just as easily as they can add images on a web application such as Facebook.

Now, let’s take a look at a theme where we want to be able to easily change the header image. The client has requested that they have the ability to change the top image for every page in order to showcase different areas of Bend, Oregon. Currently the top of all the pages looks like this image below:

Custom header for WordPress

Static image for every single page

First, let’s edit functions.php. Add the following lines to the very end of your file. Make sure to add them before “?>”. That bit should always be at the very end.

[php]add_theme_support( ‘post-thumbnails’ );[/php]

That code will enable the Post Thumbnail UI for pages and posts. If you would like to add it to one or the other, use either one of the following lines instead:

[php]<br />
add_theme_support( ‘post-thumbnails’, array( ‘post’ ) ); // Add it for posts<br />
add_theme_support( ‘post-thumbnails’, array( ‘page’ ) ); // Add it for pages<br />

Next, you may want to specify what dimensions the uploaded images will have. You can either go with box-resizing or hard-cropping. Box-resizing will proportionally resize an image. This is good if you don’t have a specific width or height that needs to be met. If you don’t want the image to exceed a specific width, but are not worried about the height ( or vice-versa ) then this is a good option for you:

[php]set_post_thumbnail_size( 100, 100 ); // 100 pixels wide by 100 pixels tall, box resize option[/php]

The next option is hard-cropping. This will crop the image to match the specified width or height. This will ensure that the user’s image matches the exact dimensions you need, but may end up cropping off much of the image if it is too big.

[php]set_post_thumbnail_size( 100, 100, true );// 100 pixels wide by 100 pixels tall, hard-cropping option[/php]

After you have chosen one of these 2 options for the thumbnail, let’s make a size for our header image. This way when the image is uploaded by our user it will also be cropped and sized for the header.

[php]add_image_size( ‘post-thumbnails-header’, 948, 222,true ); // Header thumbnail size[/php]

You should now have something like this:

[php]<br />
// This theme uses post thumbnails<br />
add_theme_support( ‘post-thumbnails’ );<br />
set_post_thumbnail_size( 100, 100, true ); // 50 pixels wide by 50 pixels tall, hard-cropping option<br />
//add another size for the header image<br />
add_image_size( ‘post-thumbnails-header’, 948, 222,true ); // Header thumbnail size<br />

The header image for the site I am working on is 948px wide by 222px tall, which I have specified in the above function.

Once this code has been added, you will see a new box for uploading an image for each page/post as pictured below.

Featured Image Box

Once you have added the necessary lines of code to functions.php, you must now edit the theme’s header.php file in order to display the image as the header of our website. In most cases we may want to use this image as the thumbnail for the post, but in this case we will make it the header image, therefore we will edit header.php.

Here is what I found in the header.php of the site I want to display the custom header image:

[code]<br />
<!– Header Image –><br />
<a href="<?php bloginfo(‘url’); ?>"><br />
<img src="<?php bloginfo(‘stylesheet_directory’); ?>/images/header-image.jpg" alt="logo" id="header-image" width="948px" height="222px" /><br />
</a><br />

The above code is where the header image is located. So let’s change it to display the image we uploaded on the page/post. In this case we will just replace the entire code from above with:

[php]<br />
<br />
<?php<br />
<br />
$HEADER_IMAGE_WIDTH = 948;<br />
<br />
// Check if this is a post or page, if it has a thumbnail, and if it’s a big one<br />
if ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘post-thumbnails-header’ ) ) && $image[1] >= $HEADER_IMAGE_WIDTH ) :<br />
<br />
//new header image<br />
echo get_the_post_thumbnail( $post->ID, ‘post-thumbnails-header’ );<br />
else : ?><br />
<img src="<?php bloginfo(‘stylesheet_directory’); ?>/images/logo.jpg" width="<?php echo $HEADER_IMAGE_WIDTH; ?>" height="<?php echo $HEADER_IMAGE_HEIGHT; ?>" alt="" /><br />
<br />
<?php endif; ?><br />

The code above first checks if the current page is really a page/post. This will prevent the header image from changing on the home page. The script then checks to make sure the page/post has an attached image and that it is big enough for the header. Finally, if the requirements are met it displays the image. If there is no image attached to the page/post, it will display the default header.

That puts a wrap on this project. Now the author/user can easily change the header of their website without having to contact the developer!

Going Further

It is possible to incorporate the same header administration area as the new WordPress theme TwentyTen uses. We will save that procedure for another blog.


About the Author:

  1. How do I set it to where there’s nothing displayed if there’s no image set in the Featured Image. Right now, if there’s nothing in the Featured Image it shows a big white space on the webpage. Thanks for your time.

0 Pings & Trackbacks

Leave a Reply