* The custom header image script.
* @subpackage Administration
* The custom header image class.
#[AllowDynamicProperties]
class Custom_Image_Header {
* Callback for administration header.
public $admin_header_callback;
* Callback for header div.
public $admin_image_div_callback;
public $default_headers = array();
* Used to trigger a success message when settings updated and set to true.
* Constructor - Registers administration header callback.
* @param callable $admin_header_callback Administration header callback.
* @param callable $admin_image_div_callback Optional. Custom image div output callback.
public function __construct( $admin_header_callback, $admin_image_div_callback = '' ) {
$this->admin_header_callback = $admin_header_callback;
$this->admin_image_div_callback = $admin_image_div_callback;
add_action( 'admin_menu', array( $this, 'init' ) );
add_action( 'customize_save_after', array( $this, 'customize_set_last_used' ) );
add_action( 'wp_ajax_custom-header-crop', array( $this, 'ajax_header_crop' ) );
add_action( 'wp_ajax_custom-header-add', array( $this, 'ajax_header_add' ) );
add_action( 'wp_ajax_custom-header-remove', array( $this, 'ajax_header_remove' ) );
* Sets up the hooks for the Custom Header admin page.
_x( 'Header', 'custom image header' ),
_x( 'Header', 'custom image header' ),
array( $this, 'admin_page' )
add_action( "admin_print_scripts-{$page}", array( $this, 'js_includes' ) );
add_action( "admin_print_styles-{$page}", array( $this, 'css_includes' ) );
add_action( "admin_head-{$page}", array( $this, 'help' ) );
add_action( "admin_head-{$page}", array( $this, 'take_action' ), 50 );
add_action( "admin_head-{$page}", array( $this, 'js' ), 50 );
if ( $this->admin_header_callback ) {
add_action( "admin_head-{$page}", $this->admin_header_callback, 51 );
get_current_screen()->add_help_tab(
'title' => __( 'Overview' ),
'<p>' . __( 'This screen is used to customize the header section of your theme.' ) . '</p>' .
'<p>' . __( 'You can choose from the theme’s default header images, or use one of your own. You can also customize how your Site Title and Tagline are displayed.' ) . '<p>',
get_current_screen()->add_help_tab(
'id' => 'set-header-image',
'title' => __( 'Header Image' ),
'<p>' . __( 'You can set a custom image header for your site. Simply upload the image and crop it, and the new header will go live immediately. Alternatively, you can use an image that has already been uploaded to your Media Library by clicking the “Choose Image” button.' ) . '</p>' .
'<p>' . __( 'Some themes come with additional header images bundled. If you see multiple images displayed, select the one you would like and click the “Save Changes” button.' ) . '</p>' .
'<p>' . __( 'If your theme has more than one default header image, or you have uploaded more than one custom header image, you have the option of having WordPress display a randomly different image on each page of your site. Click the “Random” radio button next to the Uploaded Images or Default Images section to enable this feature.' ) . '</p>' .
'<p>' . __( 'If you do not want a header image to be displayed on your site at all, click the “Remove Header Image” button at the bottom of the Header Image section of this page. If you want to re-enable the header image later, you just have to select one of the other image options and click “Save Changes”.' ) . '</p>',
get_current_screen()->add_help_tab(
'id' => 'set-header-text',
'title' => __( 'Header Text' ),
/* translators: %s: URL to General Settings screen. */
__( 'For most themes, the header text is your Site Title and Tagline, as defined in the <a href="%s">General Settings</a> section.' ),
admin_url( 'options-general.php' )
'<p>' . __( 'In the Header Text section of this page, you can choose whether to display this text or hide it. You can also choose a color for the text by clicking the Select Color button and either typing in a legitimate HTML hex value, e.g. “#ff0000” for red, or by choosing a color using the color picker.' ) . '</p>' .
'<p>' . __( 'Do not forget to click “Save Changes” when you are done!' ) . '</p>',
get_current_screen()->set_help_sidebar(
'<p><strong>' . __( 'For more information:' ) . '</strong></p>' .
'<p>' . __( '<a href="https://codex.wordpress.org/Appearance_Header_Screen">Documentation on Custom Header</a>' ) . '</p>' .
'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
* @return int Current step.
if ( ! isset( $_GET['step'] ) ) {
$step = (int) $_GET['step'];
if ( $step < 1 || 3 < $step ||
( 2 === $step && ! wp_verify_nonce( $_REQUEST['_wpnonce-custom-header-upload'], 'custom-header-upload' ) ) ||
( 3 === $step && ! wp_verify_nonce( $_REQUEST['_wpnonce'], 'custom-header-crop-image' ) )
* Sets up the enqueue for the JavaScript files.
public function js_includes() {
if ( ( 1 === $step || 3 === $step ) ) {
wp_enqueue_script( 'custom-header' );
if ( current_theme_supports( 'custom-header', 'header-text' ) ) {
wp_enqueue_script( 'wp-color-picker' );
} elseif ( 2 === $step ) {
wp_enqueue_script( 'imgareaselect' );
* Sets up the enqueue for the CSS files.
public function css_includes() {
if ( ( 1 === $step || 3 === $step ) && current_theme_supports( 'custom-header', 'header-text' ) ) {
wp_enqueue_style( 'wp-color-picker' );
} elseif ( 2 === $step ) {
wp_enqueue_style( 'imgareaselect' );
* Executes custom header modification.
public function take_action() {
if ( ! current_user_can( 'edit_theme_options' ) ) {
if ( isset( $_POST['resetheader'] ) ) {
check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
$this->reset_header_image();
if ( isset( $_POST['removeheader'] ) ) {
check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
$this->remove_header_image();
if ( isset( $_POST['text-color'] ) && ! isset( $_POST['display-header-text'] ) ) {
check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
set_theme_mod( 'header_textcolor', 'blank' );
} elseif ( isset( $_POST['text-color'] ) ) {
check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
$_POST['text-color'] = str_replace( '#', '', $_POST['text-color'] );
$color = preg_replace( '/[^0-9a-fA-F]/', '', $_POST['text-color'] );
if ( strlen( $color ) === 6 || strlen( $color ) === 3 ) {
set_theme_mod( 'header_textcolor', $color );
set_theme_mod( 'header_textcolor', 'blank' );
if ( isset( $_POST['default-header'] ) ) {
check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
$this->set_header_image( $_POST['default-header'] );
* Processes the default headers.
* @global array $_wp_default_headers
public function process_default_headers() {
global $_wp_default_headers;
if ( ! isset( $_wp_default_headers ) ) {
if ( ! empty( $this->default_headers ) ) {
$this->default_headers = $_wp_default_headers;
$template_directory_uri = get_template_directory_uri();
$stylesheet_directory_uri = get_stylesheet_directory_uri();
foreach ( array_keys( $this->default_headers ) as $header ) {
$this->default_headers[ $header ]['url'] = sprintf(
$this->default_headers[ $header ]['url'],
$stylesheet_directory_uri
$this->default_headers[ $header ]['thumbnail_url'] = sprintf(
$this->default_headers[ $header ]['thumbnail_url'],
$stylesheet_directory_uri
* Displays UI for selecting one of several default headers.
* Shows the random image option if this theme has multiple header images.
* Random image option is on by default if no header has been set.
* @param string $type The header type. One of 'default' (for the Uploaded Images control)
* or 'uploaded' (for the Uploaded Images control).
public function show_header_selector( $type = 'default' ) {
if ( 'default' === $type ) {
$headers = $this->default_headers;
$headers = get_uploaded_header_images();
if ( 1 < count( $headers ) ) {
echo '<div class="random-header">';
echo '<label><input name="default-header" type="radio" value="random-' . $type . '-image"' . checked( is_random_header_image( $type ), true, false ) . ' />';
_e( '<strong>Random:</strong> Show a different image on each page.' );
echo '<div class="available-headers">';
foreach ( $headers as $header_key => $header ) {
$header_thumbnail = $header['thumbnail_url'];
$header_url = $header['url'];
$header_alt_text = empty( $header['alt_text'] ) ? '' : $header['alt_text'];
echo '<div class="default-header">';
echo '<label><input name="default-header" type="radio" value="' . esc_attr( $header_key ) . '" ' . checked( $header_url, get_theme_mod( 'header_image' ), false ) . ' />';
if ( ! empty( $header['attachment_id'] ) ) {
echo '<img src="' . esc_url( set_url_scheme( $header_thumbnail ) ) . '" alt="' . esc_attr( $header_alt_text ) . '"' . $width . ' /></label>';
echo '<div class="clear"></div></div>';
* Executes JavaScript depending on step.
if ( ( 1 === $step || 3 === $step ) && current_theme_supports( 'custom-header', 'header-text' ) ) {
} elseif ( 2 === $step ) {
* Displays JavaScript based on Step 1 and 3.
if ( current_theme_supports( 'custom-header', 'default-text-color' ) ) {
$default_color = get_theme_support( 'custom-header', 'default-text-color' );
if ( $default_color && ! str_contains( $default_color, '#' ) ) {
$default_color = '#' . $default_color;
<script type="text/javascript">
var default_color = '<?php echo esc_js( $default_color ); ?>',
function pickColor(color) {
$('#name').css('color', color);
$('#desc').css('color', color);
$('#text-color').val(color);
var checked = $('#display-header-text').prop('checked'),
header_text_fields.toggle( checked );
text_color = $('#text-color');
if ( '' === text_color.val().replace('#', '') ) {
text_color.val( default_color );
pickColor( default_color );
pickColor( text_color.val() );
var text_color = $('#text-color');
header_text_fields = $('.displaying-header-text');
text_color.wpColorPicker({
change: function( event, ui ) {
pickColor( text_color.wpColorPicker('color') );
$('#display-header-text').click( toggle_text );
<?php if ( ! display_header_text() ) : ?>
* Displays JavaScript based on Step 2.
<script type="text/javascript">
function onEndCrop( coords ) {
jQuery( '#x1' ).val(coords.x);
jQuery( '#y1' ).val(coords.y);
jQuery( '#width' ).val(coords.w);
jQuery( '#height' ).val(coords.h);
var xinit = <?php echo absint( get_theme_support( 'custom-header', 'width' ) ); ?>;
var yinit = <?php echo absint( get_theme_support( 'custom-header', 'height' ) ); ?>;
var ratio = xinit / yinit;
var ximg = jQuery('img#upload').width();
var yimg = jQuery('img#upload').height();
if ( yimg < yinit || ximg < xinit ) {
if ( ximg / yimg > ratio ) {
jQuery('img#upload').imgAreaSelect({
if ( ! current_theme_supports( 'custom-header', 'flex-height' )
&& ! current_theme_supports( 'custom-header', 'flex-width' )
aspectRatio: xinit + ':' + yinit,
if ( ! current_theme_supports( 'custom-header', 'flex-height' ) ) {
maxHeight: <?php echo get_theme_support( 'custom-header', 'height' ); ?>,
if ( ! current_theme_supports( 'custom-header', 'flex-width' ) ) {
maxWidth: <?php echo get_theme_support( 'custom-header', 'width' ); ?>,
jQuery('#width').val(xinit);
jQuery('#height').val(yinit);
onSelectChange: function(img, c) {
jQuery('#width').val(c.width);
jQuery('#height').val(c.height);