How To Add Featured Images To Your WordPress Categories

How To Add Featured Images To Your WordPress Categories

Featured images for categories are one of those ideas that are so obviously beneficial that you’ve probably not thought about it before.

A Featured image can, and does, make a huge positive impact on the post pages so it’s only natural, when you think about it, to extend that impact to our category pages with the added bonus of giving the visitor an instant visual cue as to the topic.

In this post, we’ll show you how to specify a featured image for a category and give you some tips on how to update your theme to display them.

Screengrab of a Bosco theme category page with a featured image and title and description overlayed.
Who wouldn’t want their category pages to look like this?

Adding featured images to your category pages requires 3 steps:

  1. Install and activate the Category Images plugin
  2. Add images to your categories in the Admin interface
  3. Update your theme to display the images on the category page

Step 3 is going to depend on your theme but I’m going to walk you through adding the updates required for Twenty Twelve (which has a category template).

So, let’s get started.

Continue reading, or jump ahead using these links:

Step 1: Install The Plugin

The easiest way to install the plugin is to simply download, upload, and activate it.

There’s nothing to configure, so on to Step 2.

Step 2: Add The Category Images

Images are added to new categories via the Add Category form or for existing categories on the Edit Category form under Posts > Categories.

Pick a category and click on Edit and you’ll see an Upload/Edit Image button at the bottom. Clicking on the button opens the Media dialog where you can select an existing image or upload a new one, just like adding a featured image to a post.

Screengrab of the category edit screen showing an uploaded image
Adding images to categories is just the same as adding them to posts

Add an image to a few categories and move on to Step 3.

Step 3: Update Your Theme

Okay, well the first 2 steps were easy: this step is where it gets a bit trickier as you now need to update your theme to output the category featured image.

To a large extent this is going to depend on your theme and how it is utilizing the WordPress Template Hierarchy. Generally, themes will either have a specific category template (category.php) or let a more generic archive template (archive.php) handle all listings, not just categories.

You might also need to look out for specific category pages. You can recognize these templates as they will be named category-[category-slug].php. If you’ve got lots of these then you might want to reconsider.

I’ll walk through updating Twenty Twelve, which uses a category.php template.

Regardless of which approach you need to take, you should create a child theme for your changes. If you’re not sure about how to create a child theme then check out our excellent how-to article.

Adding Category Featured Images To Twenty Twelve

This aging but hugely popular WordPress default theme is still a great theme to practice on. There’s only one thing needed with the plugin.

Below this code:
<header class="archive-header">

in the category.php, add:

<?php if (function_exists('z_taxonomy_image')) z_taxonomy_image(); ?>

If you visit a category with an image you’ll see an immediate difference but the category image and the category title needs some TLC.

Giving The Category Image And Title Some TLC

Twenty-Twelve theme as seen many updates over the years and full-size images are 100% wide by default, so there’s no need to adjust the image at all. The only CSS needed to overlay the title on the image as described in the post, and ensure the title is responsive, is this:

header.archive-header h1.archive-title {
    position: absolute;
    color: #ffffff;
    font-size: 2em;
    margin-top: -120px;
    margin-left: 25px;
    word-wrap: break-word;
    max-width: 50%;
    line-height: 1.5em;
}

The archive-title is quite radically overhauled: its color is changed to white, the font size is greatly increased and the positioning and negative margin ensure that it gets displayed over the featured image like this:

Screengrab of a Twenty Twelve category page with a category image
A pretty impressive improvement for a Twenty Twelve category page

Not bad at all and a vast improvement on this:

Screengrab showing out-of-the-box Twenty Twelve category page header
Pretty bland compared to the featured image version

Note: I did remove all the widgets from the main sidebar to ensure a full-width display.

This example certainly shows how featured images can enhance a category page on your WordPress site. As always, a lot will depend on the quality of those images but pick the right image and the results are impressive.

Have you tried using this plugin and adding a featured image? Let us know in the comments!
Tags:
Chris Knowles
Chris Knowles A WordPress pro, Chris has a bent for hacking WordPress, content management and online media.