Make WordPress Core

Changeset 56583


Ignore:
Timestamp:
09/14/2023 11:23:59 AM (10 days 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.