Below is a variation of the earlier linked tutorial which will work not only on category archives (Ex.: example.com/category/category-1) but also on tag archives (Ex.: example.com/tag/headlines) and any other custom taxonomy term archive pages (Ex.: example.com/portfolio_category/featured).
Step 1
Install and activate WP Term Images plugin.
Step 2
Edit category / tag / taxonomy archive pages and set your desired images.
Step 3
Add the following in child theme’s functions.php:
// Register custom image size for hero images on category / tag / taxonomy archive pages. add_image_size( 'category-image', 1600, 400, true ); add_action( 'genesis_after_header', 'sk_taxonomy_term_hero_image' ); /** * Display hero image below header on category / tag / taxonomy archive pages. */ function sk_taxonomy_term_hero_image() { global $wp_query; // if we are not on a category archive or tag archive or a taxonomy archive, abort. if ( ! is_category() && ! is_tag() && ! is_tax() ) { return; } // get and store the object of current taxonomy term or category or tag. $term = is_tax() ? get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ) : $wp_query->get_queried_object(); if ( ! $term ) { return; } // image id is stored as term meta. $image_id = get_term_meta( $term->term_id, 'image', true ); // image data stored in array, second argument is which image size to retrieve. $image_data = wp_get_attachment_image_src( $image_id, 'category-image' ); // image url is the first item in the array (aka 0). $image = $image_data[0]; // if there's no image for this category, abort. if ( empty( $image ) ) { return; } printf( '<figure class="term-image"><img src="%s" alt="%s" /></figure>', $image, single_cat_title( '', false ) ); }
Step 4
Add the following in child theme’s style.css:
.category-image img { vertical-align: top; width: 100%; }
References:
How to display taxonomy term image below archive intro text in Genesis
Leave a Reply