Adding a custom image to a category page header in WordPress

WordPress comes with a built-in category system to help with a creation of category pages. These pages are the pages that give your site visitors a way to view all the posts on a certain topic or category in one place.

The category archive view, same as the blog page, is generated automatically by a WordPress core based on a per-defined template provided by the theme.

The problem is that WordPress does not provide an option to upload a custom image for a category archive page. However, we can use a custom CSS to modify the page header section on a category page.

Get a CSS class of the category page

The core of WordPress automatically assigns a special CSS class for each category archive page. This CSS class is based on the category name. We need this class to add a custom image to the page header.

For instance, if the name of a category is “Lifestyle” then a special CSS class for this category page is category-lifestyle.

In other words, If you open a category page with a name of “Travel” then WordPress will automatically create category-travel as a special CSS class for the page.

Get a CSS class of the page header section

In order to apply a custom styling to the page header section, you need to know a CSS class of that section. The problem is that this CSS class varies from theme to theme.

In other words, it’s not the same for every WordPress theme. So, you need find out a CSS class of your page header section before applying your custom changes.

Page header is the section which contains the title of the category page and its description if it presents. In short, it’s a container where the title and description are located.

Note, if you do not know how to find a CSS class of the page header section of your category page then you can contact the author your of theme for this information.

At Themes Harbor, we use page-header as a CSS class of the page header section in our professional WordPress themes. So, in the instruction below, I will use this class in the CSS example.

Display a custom image using CSS

In this guide, I am going to use Aquine, one of our professional themes for WordPress, as an example for illustrating this process of customizing the page header section in category views.

Make sure to have a unique CSS class of the category page you want to customize along with a CSS class of the page header before proceeding to the step below.

So, the first step is to know needed CSS classes.

Next, we need to add a custom CSS to the site. Otherwise, WordPress will not know which image we want to show in the page header section, and and which category page we want to customize.

Here is my custom CSS for adding a custom image to the page header on the category page with a name of “Entertainment”:

.category-entertainment .page-header {
    display: grid;
    grid-column-gap: 1.5rem;
    grid-template-columns: 100px 1fr;
    grid-template-areas:
        "image content"
        "image content"
}

.category-entertainment .page-header::before {
    content: "";
    display: block;
    grid-area: image;
    background-image: url(https://example.com/my-category-image.jpg);
    background-repeat: no-repeat;
    background-size: 100px 70px;
    width: 100px;
    height: 70px;
}

In this example, I am using the image which has size: 100px (width), 70px (height). You can see size values in the custom CSS above. Modify them if you want to have a different size.

Solution with a custom CSS does not work

The are cases when the solution above might not work. If the custom CSS you’ve used for your menu item does not work then it’s possible that your theme overrides your custom styles.

• If you are using a free theme from WordPress.org then please post your support request at WordPress.org support forum.
• If you are using one of our themes, please contact us using the link located in the site header.
• If you are using the theme other vendor, please contact the author of your theme for support.

Make your site look its best with Themes Harbor

To unleash more of the potential of your WordPress site and give visitors a great experience, however, you will need to use a professional WordPress theme.

Themes Harbor enables you to create a human-centered and future proof website for your audience using a professional WordPress theme.