Category-specific Header Hero images in Essence Pro

Update on March 27, 2020: Added a functionality plugin for this in case you prefer not editing the child theme files.

This members-only premium tutorial provides the steps to be able to associate an image for taxonomies in your WordPress site and if present, show it as the header hero background image in Essence Pro.

Before:

Image set for the category using WP Term Images plugin:

After:

Tested in Essence Pro 1.3.1.

Step 1

Install and activate WP Term Images plugin.

Edit your categories and upload/select corresponding images.

Step 2

Edit /themes/essence-pro/lib/header-functions.php.

Replace

/**
 * Modifies the default CSS output for custom-header.
 *
 * @since 1.0.0
 */
function essence_header_style() {

	$output   = '';
	$bg_image = '';

	$is_woocommerce_shop_or_product = class_exists( 'WooCommerce' ) && ( is_post_type_archive( 'product' ) || is_singular( 'product' ) );
	$is_woocommerce_archive         = class_exists( 'WooCommerce' ) && ( is_product_category() || is_product_tag() );

	if ( has_post_thumbnail() && is_singular() && ! is_singular( 'product' ) ) {
		$bg_image = genesis_get_image(
			[
				'format' => 'url',
				'size'   => 'header-hero',
			]
		);
	} elseif ( $is_woocommerce_shop_or_product || $is_woocommerce_archive ) {
		$bg_image = genesis_get_image(
			[
				'format'  => 'url',
				'size'    => 'header-hero',
				'post_id' => wc_get_page_id( 'shop' ),
			]
		);
	}

	if ( ! $bg_image ) {
		$bg_image = get_header_image();
	}

	if ( $bg_image ) {
		$output = '<style type="text/css">.header-hero { background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%), url(' . esc_url( $bg_image ) . '); }</style>';
	}

	echo $output; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

}

with