WordPress.org
Get WordPress

Make WordPress Core

Changeset 56583


Ignore:
Timestamp:
09/14/2023 11:23:59 AM (3 years ago)
Author:
spacedmonkey
Message:

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.

Location:
trunk/src/wp-content/themes
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentyeleven/functions.php

    r56549 r56583  
    441441endif; // twentyeleven_admin_header_image()
    442442
     443
     444if ( ! function_exists( 'twentyeleven_header_image' ) ) :
     445        /**
     446         * Custom header image markup displayed.
     447         *
     448         * @since Twenty Eleven 4.5
     449         */
     450        function twentyeleven_header_image() {
     451                $attrs = array(
     452                        'alt' => get_bloginfo( 'name', 'display' ),
     453                );
     454
     455                // Compatibility with versions of WordPress prior to 3.4.
     456                if ( function_exists( 'get_custom_header' ) ) {
     457                        $custom_header   = get_custom_header();
     458                        $attrs['width']  = $custom_header->width;
     459                        $attrs['height'] = $custom_header->height;
     460                } else {
     461                        $attrs['width']  = HEADER_IMAGE_WIDTH;
     462                        $attrs['height'] = HEADER_IMAGE_HEIGHT;
     463                }
     464
     465                if ( function_exists( 'the_header_image_tag' ) ) {
     466                        the_header_image_tag( $attrs );
     467                        return;
     468                }
     469
     470                ?>
     471                <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'] ); ?>" />
     472                <?php
     473        }
     474endif; // twentyeleven_header_image()
     475
    443476/**
    444477 * Set the post excerpt length to 40 words.

  • trunk/src/wp-content/themes/twentyeleven/header.php

    r56315 r56583  
    112112                                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    113113                                } else {
    114                                         // Compatibility with versions of WordPress prior to 3.4.
    115                                         if ( function_exists( 'get_custom_header' ) ) {
    116                                                 $header_image_width  = get_custom_header()->width;
    117                                                 $header_image_height = get_custom_header()->height;
    118                                         } else {
    119                                                 $header_image_width  = HEADER_IMAGE_WIDTH;
    120                                                 $header_image_height = HEADER_IMAGE_HEIGHT;
    121                                         }
    122                                         ?>
    123                                         <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' ) ); ?>" />
    124                                         <?php
     114                                        twentyeleven_header_image();
    125115                                } // End check for featured image or standard header.
    126116                                ?>

  • trunk/src/wp-content/themes/twentyfourteen/header.php

    r55276 r56583  
    3737        <div id="site-header">
    3838                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    39                         <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' ) ); ?>" />
     39                        <?php twentyfourteen_header_image(); ?>
    4040                </a>
    4141        </div>

  • trunk/src/wp-content/themes/twentyfourteen/inc/custom-header.php

    r55420 r56583  
    152152        }
    153153endif; // twentyfourteen_admin_header_image()
     154
     155
     156if ( ! function_exists( 'twentyfourteen_header_image' ) ) :
     157        /**
     158         * Create the custom header image markup displayed.
     159         *
     160         * @see twentyfourteen_custom_header_setup()
     161         *
     162         * @since Twenty Fourteen 3.8
     163         */
     164        function twentyfourteen_header_image() {
     165                $custom_header = get_custom_header();
     166                $attrs         = array(
     167                        'alt'    => get_bloginfo( 'name', 'display' ),
     168                        'height' => $custom_header->height,
     169                        'width'  => $custom_header->width,
     170                );
     171                if ( function_exists( 'the_header_image_tag' ) ) {
     172                        the_header_image_tag( $attrs );
     173                        return;
     174                }
     175                ?>
     176                <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'] ); ?>" />
     177                <?php
     178        }
     179endif; // twentyfourteen_header_image()

  • trunk/src/wp-content/themes/twentysixteen/header.php

    r55276 r56583  
    103103                                <div class="header-image">
    104104                                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    105                                                 <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' ) ); ?>" />
     105                                                <?php
     106                                                $custom_header = get_custom_header();
     107                                                $attrs         = array(
     108                                                        'alt'    => get_bloginfo( 'name', 'display' ),
     109                                                        'sizes'  => $custom_header_sizes,
     110                                                        'height' => $custom_header->height,
     111                                                        'width'  => $custom_header->width,
     112                                                );
     113
     114                                                the_header_image_tag( $attrs );
     115                                                ?>
    106116                                        </a>
    107117                                </div><!-- .header-image -->

  • trunk/src/wp-content/themes/twentyten/functions.php

    r56315 r56583  
    291291endif;
    292292
     293
     294if ( ! function_exists( 'twentyten_header_image' ) ) :
     295        /**
     296         * Custom header image markup displayed.
     297         *
     298         * @since Twenty Ten 4.0
     299         */
     300        function twentyten_header_image() {
     301                $attrs = array(
     302                        'alt' => get_bloginfo( 'name', 'display' ),
     303                );
     304
     305                // Compatibility with versions of WordPress prior to 3.4.
     306                if ( function_exists( 'get_custom_header' ) ) {
     307                        $custom_header   = get_custom_header();
     308                        $attrs['width']  = $custom_header->width;
     309                        $attrs['height'] = $custom_header->height;
     310                } else {
     311                        $attrs['width']  = HEADER_IMAGE_WIDTH;
     312                        $attrs['height'] = HEADER_IMAGE_HEIGHT;
     313                }
     314
     315                if ( function_exists( 'the_header_image_tag' ) ) {
     316                        the_header_image_tag( $attrs );
     317                        return;
     318                }
     319
     320                ?>
     321                <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'] ); ?>" />
     322                <?php
     323        }
     324endif; // twentyten_header_image()
     325
    293326/**
    294327 * Show a home link for our wp_nav_menu() fallback, wp_page_menu().

  • trunk/src/wp-content/themes/twentyten/header.php

    r56315 r56583  
    9696                                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    9797                                } else {
    98                                         // Compatibility with versions of WordPress prior to 3.4.
    99                                         if ( function_exists( 'get_custom_header' ) ) {
    100                                                 $header_image_width  = get_custom_header()->width;
    101                                                 $header_image_height = get_custom_header()->height;
    102                                         } else {
    103                                                 $header_image_width  = HEADER_IMAGE_WIDTH;
    104                                                 $header_image_height = HEADER_IMAGE_HEIGHT;
    105                                         }
    106                                         ?>
    107                                         <img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="" />
    108                                         <?php
     98                                        twentyten_header_image();
    10999                                } // End check for featured image or standard header.
    110100                                ?>

  • trunk/src/wp-content/themes/twentytwelve/header.php

    r54924 r56583  
    5555
    5656                <?php if ( get_header_image() ) : ?>
    57                 <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>
     57                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php twentytwelve_header_image(); ?></a>
    5858                <?php endif; ?>
    5959        </header><!-- #masthead -->

  • trunk/src/wp-content/themes/twentytwelve/inc/custom-header.php

    r55420 r56583  
    167167        <?php
    168168}
     169
     170
     171/**
     172 * Output markup to be displayed.
     173 *
     174 * @since Twenty Twelve 4.1
     175 */
     176function twentytwelve_header_image() {
     177        $custom_header = get_custom_header();
     178        $attrs         = array(
     179                'alt'    => get_bloginfo( 'name', 'display' ),
     180                'class'  => 'header-image',
     181                'height' => $custom_header->height,
     182                'width'  => $custom_header->width,
     183        );
     184
     185        if ( function_exists( 'the_header_image_tag' ) ) {
     186                the_header_image_tag( $attrs );
     187                return;
     188        }
     189        ?>
     190        <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'] ); ?>" />
     191        <?php
     192}
Note: See TracChangeset for help on using the changeset viewer.