Default Category Images for WordPress

I’ve been working on a news oriented WordPress site lately. One of the nice things with WordPress 2.9 and above was that they created a “thumbnail” feature, also known as “featured image” in 3.0+. With this feature you could display an image  related to the article to help preview it. Most sites you see now use this in conjunction with a “slider” on their home page.

In the site I’m working on, there isn’t a featured image for every single news item available. Sometimes the news item is simply a repeat of a notice from another source. Since the home page of the site looked for an image to display in its list, the page became unattractive since there were a lot of “no image available” boxes scattered on the page:

Site without categories
The site without category images (click for larger view).

The idea then arose about having an icon or default image for each category, and displaying that when an image was not available. Since I’m still honing my WordPress chops, so I needed to develop a solution that didn’t involve creating plugins and wasn’t too deeply embedded within the site that it would make it hard to update down the road. The home page has several widgets that retrieve the featured image in various formats (full, medium, small) so I needed to find a single point of entry in which to return the image, and let the theme do its own resizing.

The first step was to create the category images and place them into a folder called “category-images” under my “wp-content” folder of the site. The key here is to name the images the same as the “nice name” values for each of the categories. This typically means using all lower case and putting a “-“ in place of spaces, such as “prescribed-burns”. This makes it easier to generate the URL to the images in the code.

The next step is to find the code in my theme where the featured images were being retrieved for a given post. This is where you’re going to have to venture out on your own to implement this solution. [Psst, hey WordPress theme developers, this would be a great time to implement this into your theme so no fancy hackery is needed!] After some digging, I found the function that served as the central point for retrieving images that were displayed on the home page widgets:

function get_images($iPostID,$img_size='thumb')

{
   $arrImages =& get_children('order=ASC&orderby=menu_order ID&post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
   $return_arr = array();

   if($arrImages)
   {
      foreach($arrImages as $key=>$val)
      {
         $id = $val->ID;

         if($img_size == 'large')
         {
            $img_arr = wp_get_attachment_image_src($id,'full');
            $return_arr[] = $img_arr[0];
         }
         elseif($img_size == 'medium')
         {
            $img_arr = wp_get_attachment_image_src($id, 'medium');
            $return_arr[] = $img_arr[0];
         }
         elseif($img_size == 'thumb')
         {
            $img_arr = wp_get_attachment_image_src($id, 'thumbnail');
            $return_arr[] = $img_arr[0];
         }
      }
   }

   return $return_arr;
}

 

The trick to making this work was to add some additional code so that the category image URL would be generated in the even no images where found. The final code looks like this:


function get_images($iPostID,$img_size='thumb')

{
   $arrImages =& get_children('order=ASC&orderby=menu_order ID&post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
   $return_arr = array();

   if($arrImages)
   {
      foreach($arrImages as $key=>$val)
      {
         $id = $val->ID;

         if($img_size == 'large')
         {
            $img_arr = wp_get_attachment_image_src($id,'full');
            $return_arr[] = $img_arr[0];
         }
         elseif($img_size == 'medium')
         {
            $img_arr = wp_get_attachment_image_src($id, 'medium');
            $return_arr[] = $img_arr[0];
         }
         elseif($img_size == 'thumb')
         {
            $img_arr = wp_get_attachment_image_src($id, 'thumbnail');
            $return_arr[] = $img_arr[0];
         }
      }
   }
   else
   {
      $category = get_the_category($iPostID);

      // if the category has no parents, use its nicename for a proper URL, otherwise use the parent category name (such as fires)
      if ($category[0]->category_parent == 0)
      {
         $return_arr[0] = site_url('/wp-content/category-images/', '') . $category[0]->category_nicename . '.jpg';
      }
      else
      {
         $parent = get_category($category[0]->category_parent);
         $return_arr[0] = site_url('/wp-content/category-images/', '') . $parent->category_nicename . '.jpg';
      }
   }

   return $return_arr;
}

WordPress makes it easy to retrieve category, and even parent category information for the post, and we use as much built in methods as possible so that the URL to the images changes easily if the site changes.

Site with categories.
The site with category images (click for larger view).

I’ve seen a few WordPress plugins to assign images to a category, but they were going to be more trouble than it was worth to integrate it into the current theme. Hopefully this gives you a direction to look at if you need to setup category images for your site, or maybe it’ll inspire a WordPress theme creator out there to build this in to the next theme they create. I’m sure there are plenty of sites that can benefit from this.

6 thoughts on “Default Category Images for WordPress

    1. Greetings Kat.

      I took a quick peek at the Options theme, and from the stuff I found it was designed with version 2.7 in mind, which didn’t include the “featured image” type feature. Do you know if they upgraded the theme to be compatible with the newer options in 2.9 and above?

  1. Hi,

    I’m currently working on a project where I need the user to assign an image to each category they create to be displayed on the homepage.
    You can have a look at it here: http://www.bedesworld.co.uk/blog/
    I’m currently using a plugin called “Category Images II” but it doesn’t seem to do what I’m after…
    Do you guys have any idea if there is any plugin already doing this or some code to create what I need?

    Your help would be much appreciated…

    Many thanks

    Christophe

    1. Greetings Christophe! I don’t know of any plugins at the moment that would allow you to do that.

      However, using the technique above, and downloading a plugin that would allow the users to upload files into a specific folder, you could probably get the desired effect by having the end user upload the images with the category name into the desired folder, and then read from there.

      Hope this helps!

What are your 10 bits on the matter? I want to know!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s