Display Custom Header Images On Category Archive Pages

I’ve already shown you how to display a different header image on your home page which is different to whats displayed on all other pages, posts and archives.

I’ve even shown you how to do this using both PHP and CSS or by simply installing a plugin to get the job done.

But what if you want a custom header image to display on each category archive page?

What if you want to add different header image sizes as well?

In this tutorial, you’ll learn how to do all of this using 2 methods.

1. CSS code
2. PHP code

Create Custom Header Images

There’s some great web design tools which you can use to create your own custom header images.

Once you’ve got your images worked out, its time to upload them to your WordPress media library or server.

Grab the full path to each specific header image and paste it into notepad.

Its best practice when editing and writing code to create and open notepad using a text/code editor like Notepad++

Add Header Image URL’s To CSS

Here’s the CSS code you’ll need to paste at the end of your child themes style.css file:

.category-34 #header {
max-width: 960px;
margin: 0 auto;
width: 100%;
height: 200px;
background: url("replace-wth-full-image-url") no-repeat scroll 0 0 transparent;
}

The above code uses the category i.d of 34 which you’ll need to replace with your own.

Here’s a simple way to find your category i.d.

Another way is to right click on your category archive and ‘view source code’ where you can scroll down and find the i.d which is normally included where your body class is located in the code.

Rinse and repeat as they say for all categories.

Don’t forget you need to set the height for each header image and the width would generally remain the same.

Here’s another way to display the same header image in all category pages using CSS.

Conditional Tags & PHP Code

Another way to display different header banners on category archive pages is to use PHP code. This code snippet includes conditional tags which contain the i.d for each category. You could easily modify this code to work with pages.

Once you’ve uploaded your header images to your media library, grab the full path to each image and replace it in the code snippet.

You can then style each image using CSS code. Here’s an example:

.category-one-header #header {
height: 150px;
margin: 0 auto;
width: 100%;
max-width: 960px;
}

Related Tutorials

• How To Display Category Image In Genesis Child Themes
• Genesis: 2 Ways To Add A Unique Header Image If Post In Specific Category