Using WordPress ‘get_header_image_tag_attributes’ PHP filter

by

The get_header_image_tag_attributes WordPress PHP filter allows you to modify the attributes of the header image tag.

Usage

add_filter( 'get_header_image_tag_attributes', 'your_function_name', 10, 2 );

function your_function_name( $attr, $header ) {
    // your custom code here
    return $attr;
}

Parameters

  • $attr (array) – An array of the attributes for the image tag.
  • $header (object) – The custom header object returned by get_custom_header().

More information

See WordPress Developer Resources: get_header_image_tag_attributes

Examples

Add a CSS class to the header image

Add a CSS class called “custom-header” to the header image tag attributes.

add_filter( 'get_header_image_tag_attributes', 'add_custom_header_class', 10, 2 );

function add_custom_header_class( $attr, $header ) {
    $attr['class'] = 'custom-header';
    return $attr;
}

Set a custom alt attribute for the header image

Set a custom alt attribute value for the header image tag.

add_filter( 'get_header_image_tag_attributes', 'set_custom_alt_attribute', 10, 2 );

function set_custom_alt_attribute( $attr, $header ) {
    $attr['alt'] = 'Custom Alt Text';
    return $attr;
}

Add a custom data attribute to the header image

Add a custom data attribute called “data-custom” with the value “example” to the header image tag.

add_filter( 'get_header_image_tag_attributes', 'add_custom_data_attribute', 10, 2 );

function add_custom_data_attribute( $attr, $header ) {
    $attr['data-custom'] = 'example';
    return $attr;
}

Remove the width and height attributes from the header image

Remove the width and height attributes from the header image tag to make it responsive.

add_filter( 'get_header_image_tag_attributes', 'remove_dimensions_from_header_image', 10, 2 );

function remove_dimensions_from_header_image( $attr, $header ) {
    unset( $attr['width'], $attr['height'] );
    return $attr;
}

Add a custom id to the header image

Add a custom id called “header-image” to the header image tag.

add_filter( 'get_header_image_tag_attributes', 'add_custom_id_to_header_image', 10, 2 );

function add_custom_id_to_header_image( $attr, $header ) {
    $attr['id'] = 'header-image';
    return $attr;
}