Featured Image Effect in Category pages

The challenge with this is that Featured Images are a core WordPress feature that is supported on posts and pages, but not on categories. Unless you add one yourself, there isn’t a place to assign an image for a category.

That means we need to add the image ourselves – then set up the category template to display it the same way it would on a single post or page.

First, in your child theme, set up a category.php file (if you don’t already have one).

Copy the parent theme’s archive.php into your child theme folder, and rename it to category.php.

Now, first step will be to remove the page title. Right now it’s in the page’s content wrapper, but we want it moved up a bit.

Remove the following:

				<header class="page-header">
					<?php
						the_archive_title( '<h1 class="page-title">', '</h1>' );
						the_archive_description( '<div class="taxonomy-description">', '</div>' );
					?>
				</header><!-- .page-header -->

Now, we need to add the page title back in, wrapped in the structure the theme uses for featured images – but instead of looking for a featured image, we’ll give it a function of our own, instead.

In your category.php file, just above the site-content-inner element, add this block of code:

	<header class="entry-header entry-hero">
		<div class="post-thumbnail">
			<img src=" <?php my_cat_images(); ?>"/>
		</div>
		<div class="entry-header-wrapper">
			<div class="entry-header-inner">
				<?php
				the_archive_title( '<h1 class="page-title">', '</h1>' );
				the_archive_description( '<div class="taxonomy-description">', '</div>' );
				?>
			</div>
		</div>
	</header><!-- .page-header -->

That recreates the featured image structure. If you look through it, you’ll see a reference to my_cat_images();

That’s a function we’ll add that you can use to define your images. Use this as a base in your child theme’s functions.php file:

function my_cat_images() {
	if ( is_category( 'THEME-SLUG-1' ) ) {
		$cat_img = 'IMAGE-URL-1';
	} elseif ( is_category( 'THEME-SLUG-2' ) ) {
		$cat_img = 'IMAGE-URL-2';
			}
	else {
		$cat_img = 'IMAGE-URL-DEFAULT';
	}

	echo $cat_img;
}

Now, you’ll want to replace the category slugs and image URLs. You can add more elseif blocks as needed. The final URL is the fallback – what to use if a category you haven’t specified is used.

Last but not least, a bit of CSS to style the titles:

.entry-hero .page-title {
    text-shadow: 0 0 0.125em rgba(0, 0, 0, 0.7);
    color: #fff;
}

That should do the trick, let me know how it goes.

Oh, and the CDN you mentioned. Jetpack’s Photon? If so these images won’t be supplied through the CDN. Photon is only able to grab specific images (more info on the Jetpack support doc:
https://jetpack.com/support/photon/

Thanks Chad. These area great suggestions.

I have been working with your code but can’t seem to get the image to appear above both the content area and sidebar. Instead it appears within the content area. So, I have copied as much of the code from the single.php as possible to see if that made a difference, but even that doesn’t move the image above both columns.

Re Photon, I will try loading the images within an article and then copy the URL from there since I don’t think WordPress deletes images from the CDN.

• This reply was modified 8 years ago by wemba32.

Instead it appears within the content area.

Hard to say without seeing it directly, but it sounds like the code in category.php might be inside the .site-content-inner element, and not before it.

If that’s not it, you can drop your category.php code into a pastebin and I’ll check it out.

Thanks Chad.

Placing your code in category.php above the .site-content-inner section solved my issues.

I added a category header above the name of the category.

Separately, I created a gallery page and loaded all header images into Photon that way. Then, I used those URLs in your header section.

I really appreciate all your guidance!

Cool! I’m glad it’s working!

Feel free to mark this as Resolved over in the sidebar when you’re ready ??