Bundled Theme: Implement the_header_image_tag function for enhanced compatibility for older core themes.

The `the_header_image_tag` function was introduced in WordPress 4.4 as part of [35594]. It is used in all themes created post WordPress 4.4 that supported header images. The function `get_header_image_tag` continues to get updated with new image features, like lazy loading, async decoding and fetch priority. To ensure our core themes maintain compatibility and benefit from these enhancements, a backward compatibility shim has been applied, integrating the `the_header_image_tag` function into the following core themes:

- Twenty Ten
- Twenty Eleven
- Twenty Twelve
- Twenty Fourteen
- Twenty Sixteen

This change ensures future compatibility and modern image features are applied for header images to these older themes. 

Props spacedmonkey, flixos90, mukesh27.
Fixes #58675.
Built from https://develop.svn.wordpress.org/trunk@56583


git-svn-id: http://core.svn.wordpress.org/trunk@56095 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentyeleven/functions.php

@@ -440,6 +440,39 @@ if ( ! function_exists( 'twentyeleven_admin_header_image' ) ) :
 	}
 endif; // twentyeleven_admin_header_image()
 
+
+if ( ! function_exists( 'twentyeleven_header_image' ) ) :
+	/**
+	 * Custom header image markup displayed.
+	 *
+	 * @since Twenty Eleven 4.5
+	 */
+	function twentyeleven_header_image() {
+		$attrs = array(
+			'alt' => get_bloginfo( 'name', 'display' ),
+		);
+
+		// Compatibility with versions of WordPress prior to 3.4.
+		if ( function_exists( 'get_custom_header' ) ) {
+			$custom_header   = get_custom_header();
+			$attrs['width']  = $custom_header->width;
+			$attrs['height'] = $custom_header->height;
+		} else {
+			$attrs['width']  = HEADER_IMAGE_WIDTH;
+			$attrs['height'] = HEADER_IMAGE_HEIGHT;
+		}
+
+		if ( function_exists( 'the_header_image_tag' ) ) {
+			the_header_image_tag( $attrs );
+			return;
+		}
+
+		?>
+		<img src="<?php header_image(); ?>" width="<?php echo esc_attr( $attrs['width'] ); ?>" height="<?php echo esc_attr( $attrs['height'] ); ?>" alt="<?php echo esc_attr( $attrs['alt'] ); ?>" />
+		<?php
+	}
+endif; // twentyeleven_header_image()
+
 /**
  * Set the post excerpt length to 40 words.
  *

wp-content/themes/twentyeleven/header.php

@@ -111,17 +111,7 @@ if ( is_singular() && get_option( 'thread_comments' ) ) {
 					// Houston, we have a new header image!
 					echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
 				} else {
-					// Compatibility with versions of WordPress prior to 3.4.
-					if ( function_exists( 'get_custom_header' ) ) {
-						$header_image_width  = get_custom_header()->width;
-						$header_image_height = get_custom_header()->height;
-					} else {
-						$header_image_width  = HEADER_IMAGE_WIDTH;
-						$header_image_height = HEADER_IMAGE_HEIGHT;
-					}
-					?>
-					<img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
-					<?php
+					twentyeleven_header_image();
 				} // End check for featured image or standard header.
 				?>
 			</a>

wp-content/themes/twentyfourteen/header.php

@@ -36,7 +36,7 @@
 	<?php if ( get_header_image() ) : ?>
 	<div id="site-header">
 		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
-			<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
+			<?php twentyfourteen_header_image(); ?>
 		</a>
 	</div>
 	<?php endif; ?>

wp-content/themes/twentyfourteen/inc/custom-header.php

@@ -151,3 +151,29 @@ if ( ! function_exists( 'twentyfourteen_admin_header_image' ) ) :
 		<?php
 	}
 endif; // twentyfourteen_admin_header_image()
+
+
+if ( ! function_exists( 'twentyfourteen_header_image' ) ) :
+	/**
+	 * Create the custom header image markup displayed.
+	 *
+	 * @see twentyfourteen_custom_header_setup()
+	 *
+	 * @since Twenty Fourteen 3.8
+	 */
+	function twentyfourteen_header_image() {
+		$custom_header = get_custom_header();
+		$attrs         = array(
+			'alt'    => get_bloginfo( 'name', 'display' ),
+			'height' => $custom_header->height,
+			'width'  => $custom_header->width,
+		);
+		if ( function_exists( 'the_header_image_tag' ) ) {
+			the_header_image_tag( $attrs );
+			return;
+		}
+		?>
+		<img src="<?php header_image(); ?>" width="<?php echo esc_attr( $attrs['width'] ); ?>" height="<?php echo esc_attr( $attrs['height'] ); ?>" alt="<?php echo esc_attr( $attrs['alt'] ); ?>" />
+		<?php
+	}
+endif; // twentyfourteen_header_image()

wp-content/themes/twentysixteen/header.php

@@ -102,7 +102,17 @@
 				?>
 				<div class="header-image">
 					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
-						<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
+						<?php
+						$custom_header = get_custom_header();
+						$attrs         = array(
+							'alt'    => get_bloginfo( 'name', 'display' ),
+							'sizes'  => $custom_header_sizes,
+							'height' => $custom_header->height,
+							'width'  => $custom_header->width,
+						);
+
+						the_header_image_tag( $attrs );
+						?>
 					</a>
 				</div><!-- .header-image -->
 			<?php endif; // End header image check. ?>

wp-content/themes/twentyten/functions.php

@@ -290,6 +290,39 @@ if ( ! function_exists( 'twentyten_admin_header_style' ) ) :
 	}
 endif;
 
+
+if ( ! function_exists( 'twentyten_header_image' ) ) :
+	/**
+	 * Custom header image markup displayed.
+	 *
+	 * @since Twenty Ten 4.0
+	 */
+	function twentyten_header_image() {
+		$attrs = array(
+			'alt' => get_bloginfo( 'name', 'display' ),
+		);
+
+		// Compatibility with versions of WordPress prior to 3.4.
+		if ( function_exists( 'get_custom_header' ) ) {
+			$custom_header   = get_custom_header();
+			$attrs['width']  = $custom_header->width;
+			$attrs['height'] = $custom_header->height;
+		} else {
+			$attrs['width']  = HEADER_IMAGE_WIDTH;
+			$attrs['height'] = HEADER_IMAGE_HEIGHT;
+		}
+
+		if ( function_exists( 'the_header_image_tag' ) ) {
+			the_header_image_tag( $attrs );
+			return;
+		}
+
+		?>
+		<img src="<?php header_image(); ?>" width="<?php echo esc_attr( $attrs['width'] ); ?>" height="<?php echo esc_attr( $attrs['height'] ); ?>" alt="<?php echo esc_attr( $attrs['alt'] ); ?>" />
+		<?php
+	}
+endif; // twentyten_header_image()
+
 /**
  * Show a home link for our wp_nav_menu() fallback, wp_page_menu().
  *

wp-content/themes/twentyten/header.php

@@ -95,17 +95,7 @@ if ( is_singular() && get_option( 'thread_comments' ) ) {
 					// Houston, we have a new header image!
 					echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
 				} else {
-					// Compatibility with versions of WordPress prior to 3.4.
-					if ( function_exists( 'get_custom_header' ) ) {
-						$header_image_width  = get_custom_header()->width;
-						$header_image_height = get_custom_header()->height;
-					} else {
-						$header_image_width  = HEADER_IMAGE_WIDTH;
-						$header_image_height = HEADER_IMAGE_HEIGHT;
-					}
-					?>
-					<img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="" />
-					<?php
+					twentyten_header_image();
 				} // End check for featured image or standard header.
 				?>
 			</div><!-- #branding -->

wp-content/themes/twentytwelve/header.php

@@ -54,7 +54,7 @@
 		</nav><!-- #site-navigation -->
 
 		<?php if ( get_header_image() ) : ?>
-		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
+		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php twentytwelve_header_image(); ?></a>
 		<?php endif; ?>
 	</header><!-- #masthead -->
 

wp-content/themes/twentytwelve/inc/custom-header.php

@@ -166,3 +166,27 @@ function twentytwelve_admin_header_image() {
 	</div>
 	<?php
 }
+
+
+/**
+ * Output markup to be displayed.
+ *
+ * @since Twenty Twelve 4.1
+ */
+function twentytwelve_header_image() {
+	$custom_header = get_custom_header();
+	$attrs         = array(
+		'alt'    => get_bloginfo( 'name', 'display' ),
+		'class'  => 'header-image',
+		'height' => $custom_header->height,
+		'width'  => $custom_header->width,
+	);
+
+	if ( function_exists( 'the_header_image_tag' ) ) {
+		the_header_image_tag( $attrs );
+		return;
+	}
+	?>
+	<img src="<?php header_image(); ?>" class="<?php echo esc_attr( $attrs['class'] ); ?>" width="<?php echo esc_attr( $attrs['width'] ); ?>" height="<?php echo esc_attr( $attrs['height'] ); ?>" alt="<?php echo esc_attr( $attrs['alt'] ); ?>" />
+	<?php
+}

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.4-alpha-56581';
+$wp_version = '6.4-alpha-56583';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.