June 25th, 2010

WordPress different headers for pages

This tutorial explains how to display a different header image for each page in WordPress.

Inserting the image

This method will explain how to do it by getting WordPress to insert the image directly in the code. Since version 2.9, it's extremely easy to have a different banner for each pages and posts. Open your theme functions.php or create it (in your theme folder), paste this code :

if ( function_exists( 'add_image_size' ) ) add_theme_support( 'post-thumbnails' ); if ( function_exists( 'add_image_size' ) ) { add_image_size( 'header-image', 960, 300 ); }

Replace 960 and 300 by your header image width and height. Now, in your theme header.php or your custom header file, paste this code :

<?php if ( has_post_thumbnail()) the_post_thumbnail('header-image'); ?>

Edit your post, set a featured image. Of course it has to be the size you defined, or larger (it will be cropped).

Calling the image with CSS

An other method would be to use conditional tags and CSS. This is good if you only have a few pages. Let's say your header.php file looks like this :

<html> <head>...</head> <body> <div id="header">...</div>

We're going to add a class that will change dynamically to your header div.

class="<?php if(is_page('page-title')) { echo 'page-title'; } elseif(is_page('page-title2')) { echo 'page-title2'; } else { } ?>"

Now your header div looks like this :

<div id="header" class=" <?php if(is_page('page-title')) { echo 'page-title'; } elseif(is_page('page-title2')) { echo 'page-title2'; } else { echo 'default-header'; } ?> "></div>

Replace page-title and page-title2 by the slugs of the pages you want to customize. Now we're going to edit the CSS:

#header { width: 960px; height: 300px; } #header .default-header { background-image: url(images/header.jpg); /* default header image */ background-repeat: no-repeat; } #header .page-title { background-image: url(images/header-page-title.jpg); /* page-title header image */ } #header .page-title2 { background-image: url(images/header-page-title2.jpg); }

And that's it.

Share and Enjoy: