• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Login
Home » Full-width hero image on category / tag / taxonomy archive pages in Genesis

Full-width hero image on category / tag / taxonomy archive pages in Genesis

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

single_cat_title()

Filed Under: Free Tagged With: Genesis

About Gabor Flamich

I'm a web developer and designer based in Budapest, Hungary. In recent years, I've documented hundreds of solutions I came across during development. This site is an archive for useful code snippets on WordPress, Genesis Framework and WooCommerce. If You have any questions related to WordPress development, get in touch!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch FSE Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP Rest API SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2025 WP Flames - All Right Reserved