This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.
Header images or banners are a strong visual element of your Thesis site design. The introduction of the Header Uploader made adding a global CSS background image very simple. But sometimes, one banner for the whole site isn’t enough!
There are two primary methods that can be used to assign different header images to assorted pages, categories, and more — CSS or PHP.
The CSS Method ∞
The CSS method is relatively easy, providing a quick and effective method to switch header image banners for one or more pages. The PHP methods can be relatively easy as well, but these can also be expanded to intelligently assign images to any portion of the site. With combinations of filters and conditions, PHP header images can, for example, place a specific header image on all posts within a certain category.
To use the CSS method below, it is presumed you have used FTP or your Control Panel to upload an image named my-other-header.jpg to the /custom/images folder. Also presumed is your identification of the custom body class for the page you want to modify to use this second header image — the placeholder of yourpageclass represents that custom class in the following.
You’re now ready to add code like this to your custom.css file contents:
.custom.yourpageclass #header {
background: url('images/my-other-header.jpg') 0 0 no-repeat;
}
Additional pages can be added using this same template, changing the image name and using the appropriate body class for the page you wish to modify.
Certain limitations to the CSS-only method exist. One such limitation is that single posts do not inherit a custom body class by default; so you would need to assign one to the post using the Thesis’ CSS Class field (under SEO Details and Additional Style).
Another limitation is that CSS is also not as capable as PHP with conditional testing — to assign the same header image to 50 different pages in CSS is to create 50 lines of code. Using PHP and conditional arrays, class filters, and other methods, maintenance is reduced and capability increased.
The PHP Method ∞
As a simple example of a PHP method for header banner image assignation, we’ll do the same as the above CSS, assigning a unique image to a single page. PHP does not use the unique body class as the identifier of the page, but instead the page “name” or ID assigned by WordPress; for this example, we’ll pretend our page ID is ’10’.
The name of the function is irrelevant as long as it is unique. However, the condition of our PHP function does matter, and ours asks “are we on a page?” and, if so, “is it the page with an ID of 10?” — provided both conditions are satisfied, our desired image is served — again presuming the file my-other-header.jpg exists in the /custom/images folder. In custom_functions.php you would add:
function my_different_header_images() {
if (is_page('10')) {
?>
<img src="<?php bloginfo('template_directory'); ?>/custom/images/my-other-header.jpg"
width="" height="" alt="" />
<?php
}
}
add_action('thesis_hook_header','my_different_header_images');
The values for width, height, and alt text are left empty in this example, but we strongly suggest that you populate them with relevant data.
But what if you want more than one header image and multiple conditions? Additional header images can be created with additional PHP code.
In the below, we stick to our page with an ID of 10, but add two more pages to the test, creating an array to contain all of the desired page IDs (i.e., IDs 20 and 23 are being added). Then we set a specific header image for all category pages, add another unique header image for search results — and if none of these conditions are met, we output a default header image.
Again in the custom_functions.php file contents:
function more_header_images() {
if (is_page (array( 10, 20, 23 ))) {
?>
<img src="<?php bloginfo('template_directory'); ?>/custom/images/my-other-header.jpg"
width="" height="" alt="" />
<?php
}
elseif (is_category()) {
?>
<img src="<?php bloginfo('template_directory'); ?>/custom/images/my-header-2.jpg"
width="" height="" alt="" />
<?php
}
elseif (is_search()) {
?>
<img src="<?php bloginfo('template_directory'); ?>/custom/images/my-header-3.jpg"
width="" height="" alt="" />
<?php
}
else {
?>
<img src="<?php bloginfo('template_directory'); ?>/custom/images/my-main-header.jpg"
width="" height="" alt="" />
<?php
}
}
add_action('thesis_hook_header','more_header_images');
While this looks somewhat daunting on the surface, the power of these conditions is self evident. With still more elaborate conditions and techniques, you can create sets of header images as diverse as your imagination allows!