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.
Adding featured images to your category pages requires 3 steps:
- Install and activate the Category Images plugin
- Add images to your categories in the Admin interface
- 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.
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:
in the category.php, add:
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 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:
Not bad at all and a vast improvement on this:
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.
Tags:
