Add filter on custom header image
-
The current code for displaying a custom header image on the page is very literal:
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" <?php responsive_schema_markup( 'url' ); ?>><img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php esc_attr( bloginfo( 'name' ) ); ?>" <?php responsive_schema_markup( 'image' ); ?> /></a>
I wanted to add a class to this code, and I couldn’t, because the output is not filtered. So first, I changed the code to this:
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" <?php responsive_schema_markup( 'url' ); ?>><?php echo get_header_image_tag( array() ); ?></a>
I then added this filter:
add_filter( 'get_header_image_tag', 'responsive_header_image_tag', 10, 3 ); function responsive_header_image_tag( $html, $header, $attr ) { return str_replace( ' />', responsive_get_schema_markup( 'image' ) . ' />', $html ); }
The new code adds the
srcset
attribute, which makes the image responsive (how punny), so it’s actually better.It also allows me to use my own
get_header_image_tag
filter to add the class to the markup, which is what I wanted to do in the first place.IMPORTANT: Please update the theme to support something similar. While you’re at it, please consider enabling custom CSS classes on customizer elements, such as the custom header image. That would have made my life SO much easier.
The page I need help with: [log in to see the link]
- The topic ‘Add filter on custom header image’ is closed to new replies.