How To Add Feature Images To Your WordPress Categories

How To Add Feature Images To Your WordPress Categories

Featured images for categories is one of those ideas that’s 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 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 Weekend WordPress Project, I’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 WPCustom 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) and Bosco (which uses a catch-all archive template) so this should cover most cases.

So, let’s get started.

Step 1: Install The Plugin

Easiest way to install the plugin is to simply search for it on the Plugins > Add New page using the search term “WPCustom”.

There’ll likely only be one result, click on Install Now and then Activate Plugin.

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 and Bosco, which uses an archive.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 Rae’s excellent how to.

Adding Category Featured Images To Twenty Twelve

This aging but hugely popular WordPress default theme is still a great theme to practice on.

It uses a category.php, so the first thing to do when you’ve created your child theme is copy the original category.php template to your child themes folder. Now open it up so we can edit it.

There are 3 main updates here:

Getting The Image’s URL

At the top of the page, a function provided by the plugin is used to fetch the URL (src) of the featured image. There’s an initial check just to make sure that the function exists (that is the plugin is activated) just so the template will work without the plugin being activated.

{code}

if (function_exists(‘category_image_src’)) {
$category_image = category_image_src( array( ‘size’ => ‘full’ ) , false );
} else {
$category_image = ”;
}

{/code}

Adding A Class To The Header

As the image is going to be contained in the <header>, it’s going to be much easier to style both the image and the title itself, if an unique class is added to the <header> tag.

This simple if statement will add the category-image class is a category image exists for this category.

{code}

<header class=”archive-header <?php if ($category_image==true) echo ‘category-image’; ?>”>

{/code}

Outputting The Image

The final update for this template, this is where the image HTML is actually inserted into the page.

An if statement just checks that there’s an image to work with and if there is a single <img> tag is generated with the src set to the category images URL we grabbed earlier, the alt attribute set to the category title and the desc attribute set to the category description.

{code}

<?php if ($category_image) : ?>

<!– category featured image –>
<img src=”<?php echo $category_image; ?>” alt=”<?php single_cat_title();?>” desc=”<?php echo wp_strip_all_tags( category_description() );?>”/>

<?php endif; ?>

{/code}

Here’s the whole template:

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

Giving The Category Image And Title Some TLC

Open up the style.css file that you created when you created the child theme and add the following css:

{code}

header.category-image img {
width: 100%;
padding: 0;
margin: 0;
position: relative;
}

header.category-image h1.archive-title,
position: absolute;
color: #ffffff;
font-size: 48pt;
margin-top: -140px;
margin-left: 25px;
}

{/code}

This CSS ensures that the image itself has a width of 100% (making it responsive) and we removed any padding or margins so that it fills as much of the space as possible.

The archive-title is quite radically overhauled: it’s 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.

That’s Twenty Twelve, how about Bosco?

Adding Category Featured Images To Bosco

Bosco is great theme from the Automattic stable and it uses an archive.php template for all its listings, so category, date, author, tag, etc.

Despite this, the changes are not overwhelmingly different to Twenty Twelve. To start, copy the existing archive.php to your child theme folder and open it in your favorite editor.

The grabbing of the category image URL is still at the top of the page but this time there’s an additional check just to make sure that a category page is being generated.

{code}

if ( is_category() && function_exists(‘category_image_src’)) {
$category_image = category_image_src( array( ‘size’ => ‘full’ ) , false );
} else {
$category_image = ”;
}

{/code}

The unique class is add to the <header> tag, just like in Twenty Twelve (note, there’s no need to check for being in a category now as it’s just a matter of whether we have a URL or not).

{code}

<header class=”page-header <?php if ($category_image==true) echo ‘category-image’; ?>”>

{/code}

And the injecting of the category image <img> tag is also the same, again relying on the presence of a URL to determine whether or not to output the tag:

{code}

<?php if ($category_image) : ?>

<!– category featured image –>
<img src=”<?php echo $category_image; ?>” alt=”<?php single_cat_title();?>” desc=”<?php echo wp_strip_all_tags( category_description() );?>”/>

<?php endif; ?>

{/code}

Here’s the full modified template:

Not surprisingly, the CSS is slightly different for Bosco although it is only slightly. The major difference is that category title has a class of page-title in Bosco rather than Twenty Twelve’s archive-title (despite the fact that it’s Bosco that uses the archive.php template).

There’s also some styling for the category description to bring it up and under the title.

Again, the end result is pretty good:

Screengrab of a Bosco theme category page with a featured image and title and description overlayed.
Big improvement again and this time the category description is included

Certainly more eye-catching than the original:

Screengrab of the Bosco category page without a category image
The original Bosco category header

These two examples certainly show how featured images can enhance a category page in 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.