Skip to content
ThemesIonic — home
WordPress Tutorials

Adding an Image to a WordPress Category

WordPress categories have a name, a slug and a description, and that is all. Every method of giving one an image is a way of storing something core does not store, so pick the cheapest one that fits.

4 min read intermediate

There is no category image in WordPress, so every approach here is a way of storing and rendering something the platform does not know about. That is not a reason to avoid it — category banners are genuinely useful on sites with few, meaningful categories — but it explains why the field appears in one theme and vanishes in the next.

Start by being clear about which image you actually want, because two different things get called a category image.

Decide which image you mean

You want Where it lives Visible to
A banner at the top of the category archive Term meta plus template code Visitors
A thumbnail in a category listing or grid Term meta plus template code Visitors
The preview image when the category URL is shared An SEO plugin's social image field People on social platforms
Decoration only, no meaning CSS, keyed off the body class Visitors, but not screen readers

The third row catches a lot of people. Setting an image in an SEO plugin's social section does nothing on the page itself, and setting a banner in the theme does nothing in link previews. If you want both, expect to set both.

Route one: use a field your theme or a plugin provides

Many themes aimed at magazines, shops and directories already add an image control to the category edit screen. Open the categories screen under Posts, edit a category, and look for an image or thumbnail control below the description.

If it is there, use it. This is by far the cheapest route, and the theme's templates already know how to render it. The trade-off is portability: the field belongs to the theme, and so does the display code.

Category-image plugins exist for the same purpose and are marginally more portable, since the meta survives a theme change even if the display does not. Either way, note the meta key somewhere before you have fifty categories depending on it.

Route two: term meta and a few lines of code

When nothing provides the field, register it yourself. The mechanism is term meta, and the hooks you need are category_edit_form_fields for the field on the edit screen, edited_category for saving it, and register_term_meta to declare the key.

Rendering it in a category template then looks like this:

$image_id = get_term_meta( get_queried_object_id(), 'category_image_id', true );

if ( $image_id ) {
    echo wp_get_attachment_image( $image_id, 'large', false, [
        'class' => 'category-banner',
    ] );
}

Store the attachment ID, never the URL. An ID survives a domain change and lets WordPress pick the right generated size and emit responsive attributes; a hard-coded URL breaks on the next migration.

Put this in a child theme or a site-specific plugin rather than the parent theme, so an update cannot remove it — customising a WordPress theme covers where site code should live.

Route three: the archive template

In a block theme, the category archive is a template you edit in the Site Editor, and you can insert an Image or Cover block into it directly. That gives every category the same image, which is fine for a decorative header and useless if each category needs its own. Combine it with the Term Description block if you want per-category text without per-category images. If block themes are new, what a WordPress block theme is explains where these templates live.

Route four: CSS, for decoration only

WordPress adds a class such as category-recipes to the <body> element on each category archive. That is enough to set a background image per category with no code and no fields:

.category-recipes .page-header {
    background-image: url("/wp-content/uploads/2026/01/recipes-banner.jpg");
    background-size: cover;
    min-height: 220px;
}

Add this through custom CSS. It is quick, it is honest about being decorative, and it has two real limits: a CSS background carries no alt text, so it must not contain information, and the browser cannot pick a responsive size for it, so the file you name is the file every phone downloads.

Before you commit

  • Set one aspect ratio and stick to it. Category banners are the fastest way to end up with twelve images cropped twelve different ways.
  • Size the file for the widest slot, not for the original. Archive pages are often a visitor's entry point — optimising images applies here more than anywhere.
  • Write alt text for any image that carries meaning, and skip routes that cannot hold it.
  • Check the rendered result rather than the editor, because a banner scaled up from a small upload is the usual cause of blurry images.

Category images are worth the effort precisely because a well-run site has only a handful of categories. If you find yourself needing images for two hundred terms, the problem is the taxonomy — see tags versus categories — not the image field.

Frequently asked

No. A category stores a name, slug, parent and description and nothing else. Any image attached to a category is stored as term meta by a theme, a plugin or your own code, which is why the field appears and disappears when you change themes.
Because the theme that provided the field also provided the template code that displayed it. The values are usually still in the term meta table, but nothing is reading them any more. Check the old theme's meta key before assuming the data is gone.
Usually not. SEO plugins set a social sharing image used in link previews, which is never rendered on the page itself. If you want a banner visible to visitors, that is a separate setting and often a separate image at a different aspect ratio.

Related guides