Hero header for category archive with Genesis (and CMB2)

Overlay category title on category image

While working on a revamp of a client website they asked for a hero image with the title overlaid on it. I found Sridhar Katakam’s How to overlay entry title on featured image in single posts and used it. Then the client asked for similar for a category archive.

Old plugin

I found another post by Sridhar for exactly this (Unique full width hero images on archive pages with headline and intro text overlay in Genesis) but the code was only available to his paid subscribers. It mentions the WP Term Images plugin. I decided against using that plugin when I saw that it had not been updated in 3 years. I fully understand that a well written plugin does not have to be recently updated to work but this one had a few bug reports in its support forum.

CMB2 to the rescue

I’ve never used CMB2 to add custom fields to a category page but here was a chance to do so. I found that ‘term‘ is the object type that I needed.

I immediately got a critical error but CMB2 provided a helpful error message telling me that I needed to include a ‘taxonomies‘ setting (I set it to ‘category‘). I was now up and running.

Code reuse

The code to generate the markup for the hero image is very similar to that from Sridhar’s code for single posts (though I didn’t provide a fallback image).

Similar to Sridhar’s code I remove the action that displays category title before the loop.

Edit category screenshot

Category archive screenshot

The code