Category Header Images Two

A Different Header Image for Each Category two for the twenty eleven WordPress theme, we come across a topics over on the WordPress.org forum asking about a header image per category.

We created a working child theme which found the earliest post for the category that had a header and returned the header image, this is another way using the uploaded header images.

This new solution works by uploading a header image through Admin > Appearance > Headers, the image should have the same name as the Category Slug, so ‘London Living’ would have a slug of ‘london-living’, so we upload and crop an image called ‘London Living.jpg’.

WordPress API

With the latest versions of WordPress the API now has a call to get_uploaded_header_images() at the moment there is no Codex page that we could find for it, the call will return an array of all the headers the admin has uploaded, so we will use this information to create an array of headers and try to match the header file name with the category slug.

Category Header Images Two

Here is a screen dump of the content of the array with two uploaded images, note that the uploaded image ‘Koala Bear.jpg’ is saved as cropped-Koala-Bear.jpg, as a Category of Koala Bear slug = koala-bear, our function will turn the filename into a slug and try to match it and return the image URL.

cat-two-1

Categories

If we open the Admin > Posts > Categories, we can manage our categories, we had already added one called Featured, if we choose Edit we can look at the slug for our category.

cat-two-2

Here we can see that this category slug has not been changed so we will upload a header image called Featured.jpg

cat-two-3

Custom Headers

We navigate to Admin > Appearance > Header, we click the Browse button and find the image we want to upload, the image with the same name as the category (slug), in this example we upload Featured.jpg

cat-two-4

WordPress knows what size the image should be and we can move the selection box to get the part we want and press ’Crop and Publish’

cat-two-5

Now we see our Category Header in the ‘Uploaded Images’ section, we reset our themes header back to the original and Save Changes.

cat-two-7

Now we can visit our website, choose the Featured Category where our image will be shown.

cat-two-8

The Functions

In the child themes folder we will find the functions.php, the code is documented to help developes understand how the image url is returned based on the category slug.

<?php
if ( ! function_exists( 'raindrops_theme_header_slugs' ) ) :
   function raindrops_theme_header_slugs() {
      // Get an array of uploaded headers
      $headers = get_uploaded_header_images();
      // Create an empty array for our header urls
      $cat_headers = array();
      if( $headers ) {
         foreach( $headers as $cat_header ) {
            /*
            Turn the filename into a category slug
            E.G. [cropped-Koala-Bear.jpg]
            Get the file name and make it lowercase
            $header[0] = URL
            $header[1] = Thumbnal URL
            */
            $file = $cat_header['url'];
           $info = pathinfo($file);
           $catslug =  strtolower( basename( $file,'.'.$info['extension'] ) );
           // Remove the cropped- from the title
           $catslug = str_replace( 'cropped-', '', $catslug );
           // we have koala-bear add it to the array
           $cat_headers[$catslug] = $cat_header['url'];
         }
     }
     return $cat_headers;
   }
endif;

if ( ! function_exists( 'raindrops_get_category_image' ) ) :
   function raindrops_get_category_image() {
      if ( is_category() ) {
         //Get the Global active Category, and our category header slugs
         global $cat;
         $curr_cat = get_category($cat);
         $cat_headers = raindrops_theme_header_slugs();
         /*
         See if we have an array and a value for the category slug
         if we do then return the URL to header.php
         */
         if( isset($cat_headers) && $cat_headers[$curr_cat->slug] ) {
            return  esc_url_raw( $cat_headers[$curr_cat->slug] );
         }
      }
      return '';
   }
endif;

We hope you find this post of interest it is something that is asked for time and time again, lets hope it will become a standard function in time.

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.

One thought on “Category Header Images Two

  1. Great, thank you for the template. Working fine for the category-view.

    In case a post does not have it’s own header-image, the blog-header-image will be shown when reader it. It would be really cool, to have the category-header-image shown in this case.

    What can I add to your code to manage that?
    Thank you!

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