Different Header Image for Each Category

A Different Header Image for Each Category in the twenty eleven WordPress theme, we often come across topics over on the WordPress.org forum which we think are generic enough to make a good Twenty Eleven Child Theme download, and this theme comes from such a post.

The topic starter is creating a travel blog where each county is a category, we can add a different header to posts and pages but not to a category, we thought of several ways we could do this, and settles on a simple solution.


The Solution

As we can already add a header to a single post, we thought how can we utilize these images as category headers, after some consideration the following solution was developed.

As always we created a child theme that can be downloaded with all the code fully working, we only needed to transfer the header.php from the parent and add a few lines of code, and in the functions.php we created a small function to get the header images url.

Category Header Images

We are not going to look at the code, the files in the download have comments in them, we have added a couple of images at the end of this post to show where to find the changes.

Category Posts

Here is a list of posts in our featured category, as we can see the oldest post is “Normal Post 1”.

Cat-image0

We want the same image to be presented to our website visitors each time they visit, so we will add a featured image, which should be at least 1000px wide, or it will not show as a header.

Cat-image1

That done lets visit the website and look at the default header that is show normally.

Cat-image2

Now we go to our category page for the category called “Featured”, where we can see our category header, a nice simple solution, not to much code.

Cat-image3

Here are the screenshots of the code, all of the code in the child themes functions.php, and the additional code in the header.php.

functions.php

Cat-image4

header.php

Cat-image6

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

3 thoughts on “Different Header Image for Each Category

  1. Can I suggest to visit http://www.borgyborgy.net It offers some free 1000×288 pixel size headers, to customize default TwentyEleven theme. Useful for blog beginners. It allows you to easily customize a standard installation, allowing a newbie to have a customized and ready blog in a few minutes. All images are taken by me and provided under a Creative Commons 3.0 License.

  2. Hello, I posted a comment months ago on the wordpress support forum in regards to having specific header images for each category and a very helpful guy with “digital raindrops” set me up completely by rewriting some code in my header.php file! I have been extremely satisfied with it ever since but now I have one request. I would like to have the front page display a slider (using vslider 4.0 perhaps) of 10 recent posts from a specified category. I am REALLY new to this and don’t know code still. The header.php file has the following code added:

    /* Digital Raindrops Category Header Image */
    $CatHeaderImage = raindrops_get_category_image();

    // Check if this is a post or page, if it has a thumbnail, and if it’s a big one
    if (is_singular()
    && has_post_thumbnail( $post->ID )
    && ( $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘post-thumbnail’ ) )
    && $image[1] >= HEADER_IMAGE_WIDTH ) {
    // Houston, we have a new header image!
    echo get_the_post_thumbnail( $post->ID );

    // Digital Raindrops Show Category Header if there is one!
    } else if ( $CatHeaderImage ) {
    ?>
    <img src="” width=”” height=”” alt=”” />

    <img src="” width=”” height=”” alt=”” />

    And i would love where to add the piece of code:

    to add the slider I named “HeaderSlider” To the banner image on the front page (ONLY FRONT PAGE). I tried to ask for help on vslider support but they are not have not replied. I know the people with digital raindrops reply because they helped me so much last time. ANY help would be greatly appreciated.
    THANKS!

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More