3 * The custom header image script.
6 * @subpackage Administration
10 * The custom header image class.
14 * @subpackage Administration
16 class Custom_Image_Header {
19 * Callback for administration header.
24 public $admin_header_callback;
27 * Callback for header div.
32 public $admin_image_div_callback;
35 * Holds default headers.
41 public $default_headers = array();
44 * Used to trigger a success message when settings updated and set to true.
53 * Constructor - Register administration header callback.
56 * @param callable $admin_header_callback
57 * @param callable $admin_image_div_callback Optional custom image div output callback.
59 public function __construct($admin_header_callback, $admin_image_div_callback = '') {
60 $this->admin_header_callback = $admin_header_callback;
61 $this->admin_image_div_callback = $admin_image_div_callback;
63 add_action( 'admin_menu', array( $this, 'init' ) );
65 add_action( 'customize_save_after', array( $this, 'customize_set_last_used' ) );
66 add_action( 'wp_ajax_custom-header-crop', array( $this, 'ajax_header_crop' ) );
67 add_action( 'wp_ajax_custom-header-add', array( $this, 'ajax_header_add' ) );
68 add_action( 'wp_ajax_custom-header-remove', array( $this, 'ajax_header_remove' ) );
72 * Set up the hooks for the Custom Header admin page.
76 public function init() {
77 $page = add_theme_page( __( 'Header' ), __( 'Header' ), 'edit_theme_options', 'custom-header', array( $this, 'admin_page' ) );
82 add_action( "admin_print_scripts-$page", array( $this, 'js_includes' ) );
83 add_action( "admin_print_styles-$page", array( $this, 'css_includes' ) );
84 add_action( "admin_head-$page", array( $this, 'help' ) );
85 add_action( "admin_head-$page", array( $this, 'take_action' ), 50 );
86 add_action( "admin_head-$page", array( $this, 'js' ), 50 );
87 if ( $this->admin_header_callback ) {
88 add_action( "admin_head-$page", $this->admin_header_callback, 51 );
93 * Adds contextual help.
97 public function help() {
98 get_current_screen()->add_help_tab( array(
100 'title' => __('Overview'),
102 '<p>' . __( 'This screen is used to customize the header section of your theme.') . '</p>' .
103 '<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>'
106 get_current_screen()->add_help_tab( array(
107 'id' => 'set-header-image',
108 'title' => __('Header Image'),
110 '<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>' .
111 '<p>' . __( 'Some themes come with additional header images bundled. If you see multiple images displayed, select the one you’d like and click the “Save Changes” button.' ) . '</p>' .
112 '<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>' .
113 '<p>' . __( 'If you don’t 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>'
116 get_current_screen()->add_help_tab( array(
117 'id' => 'set-header-text',
118 'title' => __('Header Text'),
120 '<p>' . sprintf( __( 'For most themes, the header text is your Site Title and Tagline, as defined in the <a href="%1$s">General Settings</a> section.' ), admin_url( 'options-general.php' ) ) . '<p>' .
121 '<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>' .
122 '<p>' . __( 'Don’t forget to click “Save Changes” when you’re done!') . '</p>'
125 get_current_screen()->set_help_sidebar(
126 '<p><strong>' . __( 'For more information:' ) . '</strong></p>' .
127 '<p>' . __( '<a href="https://codex.wordpress.org/Appearance_Header_Screen" target="_blank">Documentation on Custom Header</a>' ) . '</p>' .
128 '<p>' . __( '<a href="https://wordpress.org/support/" target="_blank">Support Forums</a>' ) . '</p>'
133 * Get the current step.
137 * @return int Current step
139 public function step() {
140 if ( ! isset( $_GET['step'] ) )
143 $step = (int) $_GET['step'];
144 if ( $step < 1 || 3 < $step ||
145 ( 2 == $step && ! wp_verify_nonce( $_REQUEST['_wpnonce-custom-header-upload'], 'custom-header-upload' ) ) ||
146 ( 3 == $step && ! wp_verify_nonce( $_REQUEST['_wpnonce'], 'custom-header-crop-image' ) )
154 * Set up the enqueue for the JavaScript files.
158 public function js_includes() {
159 $step = $this->step();
161 if ( ( 1 == $step || 3 == $step ) ) {
163 wp_enqueue_script( 'custom-header' );
164 if ( current_theme_supports( 'custom-header', 'header-text' ) )
165 wp_enqueue_script( 'wp-color-picker' );
166 } elseif ( 2 == $step ) {
167 wp_enqueue_script('imgareaselect');
172 * Set up the enqueue for the CSS files
176 public function css_includes() {
177 $step = $this->step();
179 if ( ( 1 == $step || 3 == $step ) && current_theme_supports( 'custom-header', 'header-text' ) )
180 wp_enqueue_style( 'wp-color-picker' );
181 elseif ( 2 == $step )
182 wp_enqueue_style('imgareaselect');
186 * Execute custom header modification.
190 public function take_action() {
191 if ( ! current_user_can('edit_theme_options') )
194 if ( empty( $_POST ) )
197 $this->updated = true;
199 if ( isset( $_POST['resetheader'] ) ) {
200 check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
201 $this->reset_header_image();
205 if ( isset( $_POST['removeheader'] ) ) {
206 check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
207 $this->remove_header_image();
211 if ( isset( $_POST['text-color'] ) && ! isset( $_POST['display-header-text'] ) ) {
212 check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
213 set_theme_mod( 'header_textcolor', 'blank' );
214 } elseif ( isset( $_POST['text-color'] ) ) {
215 check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
216 $_POST['text-color'] = str_replace( '#', '', $_POST['text-color'] );
217 $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['text-color']);
218 if ( strlen($color) == 6 || strlen($color) == 3 )
219 set_theme_mod('header_textcolor', $color);
221 set_theme_mod( 'header_textcolor', 'blank' );
224 if ( isset( $_POST['default-header'] ) ) {
225 check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
226 $this->set_header_image( $_POST['default-header'] );
232 * Process the default headers
236 * @global array $_wp_default_headers
238 public function process_default_headers() {
239 global $_wp_default_headers;
241 if ( !isset($_wp_default_headers) )
244 if ( ! empty( $this->default_headers ) ) {
248 $this->default_headers = $_wp_default_headers;
249 $template_directory_uri = get_template_directory_uri();
250 $stylesheet_directory_uri = get_stylesheet_directory_uri();
251 foreach ( array_keys($this->default_headers) as $header ) {
252 $this->default_headers[$header]['url'] = sprintf( $this->default_headers[$header]['url'], $template_directory_uri, $stylesheet_directory_uri );
253 $this->default_headers[$header]['thumbnail_url'] = sprintf( $this->default_headers[$header]['thumbnail_url'], $template_directory_uri, $stylesheet_directory_uri );
258 * Display UI for selecting one of several default headers.
260 * Show the random image option if this theme has multiple header images.
261 * Random image option is on by default if no header has been set.
265 * @param string $type The header type. One of 'default' (for the Uploaded Images control)
266 * or 'uploaded' (for the Uploaded Images control).
268 public function show_header_selector( $type = 'default' ) {
269 if ( 'default' == $type ) {
270 $headers = $this->default_headers;
272 $headers = get_uploaded_header_images();
276 if ( 1 < count( $headers ) ) {
277 echo '<div class="random-header">';
278 echo '<label><input name="default-header" type="radio" value="random-' . $type . '-image"' . checked( is_random_header_image( $type ), true, false ) . ' />';
279 _e( '<strong>Random:</strong> Show a different image on each page.' );
284 echo '<div class="available-headers">';
285 foreach ( $headers as $header_key => $header ) {
286 $header_thumbnail = $header['thumbnail_url'];
287 $header_url = $header['url'];
288 $header_alt_text = empty( $header['alt_text'] ) ? '' : $header['alt_text'];
289 echo '<div class="default-header">';
290 echo '<label><input name="default-header" type="radio" value="' . esc_attr( $header_key ) . '" ' . checked( $header_url, get_theme_mod( 'header_image' ), false ) . ' />';
292 if ( !empty( $header['attachment_id'] ) )
293 $width = ' width="230"';
294 echo '<img src="' . set_url_scheme( $header_thumbnail ) . '" alt="' . esc_attr( $header_alt_text ) .'"' . $width . ' /></label>';
297 echo '<div class="clear"></div></div>';
301 * Execute JavaScript depending on step.
305 public function js() {
306 $step = $this->step();
307 if ( ( 1 == $step || 3 == $step ) && current_theme_supports( 'custom-header', 'header-text' ) )
309 elseif ( 2 == $step )
314 * Display JavaScript based on Step 1 and 3.
318 public function js_1() {
320 if ( current_theme_supports( 'custom-header', 'default-text-color' ) ) {
321 $default_color = get_theme_support( 'custom-header', 'default-text-color' );
322 if ( $default_color && false === strpos( $default_color, '#' ) ) {
323 $default_color = '#' . $default_color;
327 <script type="text/javascript">
329 var default_color = '<?php echo $default_color; ?>',
332 function pickColor(color) {
333 $('#name').css('color', color);
334 $('#desc').css('color', color);
335 $('#text-color').val(color);
338 function toggle_text() {
339 var checked = $('#display-header-text').prop('checked'),
341 header_text_fields.toggle( checked );
344 text_color = $('#text-color');
345 if ( '' == text_color.val().replace('#', '') ) {
346 text_color.val( default_color );
347 pickColor( default_color );
349 pickColor( text_color.val() );
353 $(document).ready(function() {
354 var text_color = $('#text-color');
355 header_text_fields = $('.displaying-header-text');
356 text_color.wpColorPicker({
357 change: function( event, ui ) {
358 pickColor( text_color.wpColorPicker('color') );
364 $('#display-header-text').click( toggle_text );
365 <?php if ( ! display_header_text() ) : ?>
375 * Display JavaScript based on Step 2.
379 public function js_2() { ?>
380 <script type="text/javascript">
381 function onEndCrop( coords ) {
382 jQuery( '#x1' ).val(coords.x);
383 jQuery( '#y1' ).val(coords.y);
384 jQuery( '#width' ).val(coords.w);
385 jQuery( '#height' ).val(coords.h);
388 jQuery(document).ready(function() {
389 var xinit = <?php echo absint( get_theme_support( 'custom-header', 'width' ) ); ?>;
390 var yinit = <?php echo absint( get_theme_support( 'custom-header', 'height' ) ); ?>;
391 var ratio = xinit / yinit;
392 var ximg = jQuery('img#upload').width();
393 var yimg = jQuery('img#upload').height();
395 if ( yimg < yinit || ximg < xinit ) {
396 if ( ximg / yimg > ratio ) {
398 xinit = yinit * ratio;
401 yinit = xinit / ratio;
405 jQuery('img#upload').imgAreaSelect({
414 if ( ! current_theme_supports( 'custom-header', 'flex-height' ) && ! current_theme_supports( 'custom-header', 'flex-width' ) ) {
416 aspectRatio: xinit + ':' + yinit,
419 if ( ! current_theme_supports( 'custom-header', 'flex-height' ) ) {
421 maxHeight: <?php echo get_theme_support( 'custom-header', 'height' ); ?>,
424 if ( ! current_theme_supports( 'custom-header', 'flex-width' ) ) {
426 maxWidth: <?php echo get_theme_support( 'custom-header', 'width' ); ?>,
430 onInit: function () {
431 jQuery('#width').val(xinit);
432 jQuery('#height').val(yinit);
434 onSelectChange: function(img, c) {
435 jQuery('#x1').val(c.x1);
436 jQuery('#y1').val(c.y1);
437 jQuery('#width').val(c.width);
438 jQuery('#height').val(c.height);
447 * Display first step of custom header image page.
451 public function step_1() {
452 $this->process_default_headers();
456 <h1><?php _e( 'Custom Header' ); ?></h1>
458 <?php if ( current_user_can( 'customize' ) ) { ?>
459 <div class="notice notice-info hide-if-no-customize">
463 __( 'You can now manage and live-preview Custom Header in the <a href="%1$s">Customizer</a>.' ),
464 admin_url( 'customize.php?autofocus[control]=header_image' )
471 <?php if ( ! empty( $this->updated ) ) { ?>
472 <div id="message" class="updated">
473 <p><?php printf( __( 'Header updated. <a href="%s">Visit your site</a> to see how it looks.' ), home_url( '/' ) ); ?></p>
477 <h3><?php _e( 'Header Image' ); ?></h3>
479 <table class="form-table">
482 <?php if ( get_custom_header() || display_header_text() ) : ?>
484 <th scope="row"><?php _e( 'Preview' ); ?></th>
487 if ( $this->admin_image_div_callback ) {
488 call_user_func( $this->admin_image_div_callback );
490 $custom_header = get_custom_header();
491 $header_image = get_header_image();
493 if ( $header_image ) {
494 $header_image_style = 'background-image:url(' . esc_url( $header_image ) . ');';
496 $header_image_style = '';
499 if ( $custom_header->width )
500 $header_image_style .= 'max-width:' . $custom_header->width . 'px;';
501 if ( $custom_header->height )
502 $header_image_style .= 'height:' . $custom_header->height . 'px;';
504 <div id="headimg" style="<?php echo $header_image_style; ?>">
506 if ( display_header_text() )
507 $style = ' style="color:#' . get_header_textcolor() . ';"';
509 $style = ' style="display:none;"';
511 <h1><a id="name" class="displaying-header-text" <?php echo $style; ?> onclick="return false;" href="<?php bloginfo('url'); ?>" tabindex="-1"><?php bloginfo( 'name' ); ?></a></h1>
512 <div id="desc" class="displaying-header-text" <?php echo $style; ?>><?php bloginfo( 'description' ); ?></div>
519 <?php if ( current_user_can( 'upload_files' ) && current_theme_supports( 'custom-header', 'uploads' ) ) : ?>
521 <th scope="row"><?php _e( 'Select Image' ); ?></th>
523 <p><?php _e( 'You can select an image to be shown at the top of your site by uploading from your computer or choosing from your media library. After selecting an image you will be able to crop it.' ); ?><br />
525 if ( ! current_theme_supports( 'custom-header', 'flex-height' ) && ! current_theme_supports( 'custom-header', 'flex-width' ) ) {
526 printf( __( 'Images of exactly <strong>%1$d × %2$d pixels</strong> will be used as-is.' ) . '<br />', get_theme_support( 'custom-header', 'width' ), get_theme_support( 'custom-header', 'height' ) );
527 } elseif ( current_theme_supports( 'custom-header', 'flex-height' ) ) {
528 if ( ! current_theme_supports( 'custom-header', 'flex-width' ) )
530 /* translators: %s: size in pixels */
531 __( 'Images should be at least %s wide.' ) . ' ',
533 /* translators: %d: custom header width */
534 '<strong>' . __( '%d pixels' ) . '</strong>',
535 get_theme_support( 'custom-header', 'width' )
538 } elseif ( current_theme_supports( 'custom-header', 'flex-width' ) ) {
539 if ( ! current_theme_supports( 'custom-header', 'flex-height' ) )
541 /* translators: %s: size in pixels */
542 __( 'Images should be at least %s tall.' ) . ' ',
544 /* translators: %d: custom header height */
545 '<strong>' . __( '%d pixels' ) . '</strong>',
546 get_theme_support( 'custom-header', 'height' )
550 if ( current_theme_supports( 'custom-header', 'flex-height' ) || current_theme_supports( 'custom-header', 'flex-width' ) ) {
551 if ( current_theme_supports( 'custom-header', 'width' ) )
553 /* translators: %s: size in pixels */
554 __( 'Suggested width is %s.' ) . ' ',
556 /* translators: %d: custom header width */
557 '<strong>' . __( '%d pixels' ) . '</strong>',
558 get_theme_support( 'custom-header', 'width' )
561 if ( current_theme_supports( 'custom-header', 'height' ) )
563 /* translators: %s: size in pixels */
564 __( 'Suggested height is %s.' ) . ' ',
566 /* translators: %d: custom header height */
567 '<strong>' . __( '%d pixels' ) . '</strong>',
568 get_theme_support( 'custom-header', 'height' )
573 <form enctype="multipart/form-data" id="upload-form" class="wp-upload-form" method="post" action="<?php echo esc_url( add_query_arg( 'step', 2 ) ) ?>">
575 <label for="upload"><?php _e( 'Choose an image from your computer:' ); ?></label><br />
576 <input type="file" id="upload" name="import" />
577 <input type="hidden" name="action" value="save" />
578 <?php wp_nonce_field( 'custom-header-upload', '_wpnonce-custom-header-upload' ); ?>
579 <?php submit_button( __( 'Upload' ), 'button', 'submit', false ); ?>
582 $modal_update_href = esc_url( add_query_arg( array(
583 'page' => 'custom-header',
585 '_wpnonce-custom-header-upload' => wp_create_nonce('custom-header-upload'),
586 ), admin_url('themes.php') ) );
589 <label for="choose-from-library-link"><?php _e( 'Or choose an image from your media library:' ); ?></label><br />
590 <button id="choose-from-library-link" class="button"
591 data-update-link="<?php echo esc_attr( $modal_update_href ); ?>"
592 data-choose="<?php esc_attr_e( 'Choose a Custom Header' ); ?>"
593 data-update="<?php esc_attr_e( 'Set as header' ); ?>"><?php _e( 'Choose Image' ); ?></button>
602 <form method="post" action="<?php echo esc_url( add_query_arg( 'step', 1 ) ) ?>">
603 <?php submit_button( null, 'screen-reader-text', 'save-header-options', false ); ?>
604 <table class="form-table">
606 <?php if ( get_uploaded_header_images() ) : ?>
608 <th scope="row"><?php _e( 'Uploaded Images' ); ?></th>
610 <p><?php _e( 'You can choose one of your previously uploaded headers, or show a random one.' ) ?></p>
612 $this->show_header_selector( 'uploaded' );
617 if ( ! empty( $this->default_headers ) ) : ?>
619 <th scope="row"><?php _e( 'Default Images' ); ?></th>
621 <?php if ( current_theme_supports( 'custom-header', 'uploads' ) ) : ?>
622 <p><?php _e( 'If you don‘t want to upload your own image, you can use one of these cool headers, or show a random one.' ) ?></p>
624 <p><?php _e( 'You can use one of these cool headers or show a random one on each page.' ) ?></p>
627 $this->show_header_selector( 'default' );
632 if ( get_header_image() ) : ?>
634 <th scope="row"><?php _e( 'Remove Image' ); ?></th>
636 <p><?php _e( 'This will remove the header image. You will not be able to restore any customizations.' ) ?></p>
637 <?php submit_button( __( 'Remove Header Image' ), 'button', 'removeheader', false ); ?>
642 $default_image = get_theme_support( 'custom-header', 'default-image' );
643 if ( $default_image && get_header_image() != $default_image ) : ?>
645 <th scope="row"><?php _e( 'Reset Image' ); ?></th>
647 <p><?php _e( 'This will restore the original header image. You will not be able to restore any customizations.' ) ?></p>
648 <?php submit_button( __( 'Restore Original Header Image' ), 'button', 'resetheader', false ); ?>
655 <?php if ( current_theme_supports( 'custom-header', 'header-text' ) ) : ?>
657 <h3><?php _e( 'Header Text' ); ?></h3>
659 <table class="form-table">
662 <th scope="row"><?php _e( 'Header Text' ); ?></th>
665 <label><input type="checkbox" name="display-header-text" id="display-header-text"<?php checked( display_header_text() ); ?> /> <?php _e( 'Show header text with your image.' ); ?></label>
670 <tr class="displaying-header-text">
671 <th scope="row"><?php _e( 'Text Color' ); ?></th>
676 if ( current_theme_supports( 'custom-header', 'default-text-color' ) ) {
677 $default_color = get_theme_support( 'custom-header', 'default-text-color' );
678 if ( $default_color && false === strpos( $default_color, '#' ) ) {
679 $default_color = '#' . $default_color;
683 $default_color_attr = $default_color ? ' data-default-color="' . esc_attr( $default_color ) . '"' : '';
685 $header_textcolor = display_header_text() ? get_header_textcolor() : get_theme_support( 'custom-header', 'default-text-color' );
686 if ( $header_textcolor && false === strpos( $header_textcolor, '#' ) ) {
687 $header_textcolor = '#' . $header_textcolor;
690 echo '<input type="text" name="text-color" id="text-color" value="' . esc_attr( $header_textcolor ) . '"' . $default_color_attr . ' />';
691 if ( $default_color ) {
692 echo ' <span class="description hide-if-js">' . sprintf( _x( 'Default: %s', 'color' ), esc_html( $default_color ) ) . '</span>';
703 * Fires just before the submit button in the custom header options form.
707 do_action( 'custom_header_options' );
709 wp_nonce_field( 'custom-header-options', '_wpnonce-custom-header-options' ); ?>
711 <?php submit_button( null, 'primary', 'save-header-options' ); ?>
718 * Display second step of custom header image page.
722 public function step_2() {
723 check_admin_referer('custom-header-upload', '_wpnonce-custom-header-upload');
724 if ( ! current_theme_supports( 'custom-header', 'uploads' ) ) {
726 '<h1>' . __( 'Cheatin’ uh?' ) . '</h1>' .
727 '<p>' . __( 'The current theme does not support uploading a custom header image.' ) . '</p>',
732 if ( empty( $_POST ) && isset( $_GET['file'] ) ) {
733 $attachment_id = absint( $_GET['file'] );
734 $file = get_attached_file( $attachment_id, true );
735 $url = wp_get_attachment_image_src( $attachment_id, 'full' );
737 } elseif ( isset( $_POST ) ) {
738 $data = $this->step_2_manage_upload();
739 $attachment_id = $data['attachment_id'];
740 $file = $data['file'];
744 if ( file_exists( $file ) ) {
745 list( $width, $height, $type, $attr ) = getimagesize( $file );
747 $data = wp_get_attachment_metadata( $attachment_id );
748 $height = isset( $data[ 'height' ] ) ? $data[ 'height' ] : 0;
749 $width = isset( $data[ 'width' ] ) ? $data[ 'width' ] : 0;
754 // For flex, limit size of image displayed to 1500px unless theme says otherwise
755 if ( current_theme_supports( 'custom-header', 'flex-width' ) )
758 if ( current_theme_supports( 'custom-header', 'max-width' ) )
759 $max_width = max( $max_width, get_theme_support( 'custom-header', 'max-width' ) );
760 $max_width = max( $max_width, get_theme_support( 'custom-header', 'width' ) );
762 // If flexible height isn't supported and the image is the exact right size
763 if ( ! current_theme_supports( 'custom-header', 'flex-height' ) && ! current_theme_supports( 'custom-header', 'flex-width' )
764 && $width == get_theme_support( 'custom-header', 'width' ) && $height == get_theme_support( 'custom-header', 'height' ) )
767 if ( file_exists( $file ) )
768 wp_update_attachment_metadata( $attachment_id, wp_generate_attachment_metadata( $attachment_id, $file ) );
770 $this->set_header_image( compact( 'url', 'attachment_id', 'width', 'height' ) );
773 * Fires after the header image is set or an error is returned.
777 * @param string $file Path to the file.
778 * @param int $attachment_id Attachment ID.
780 do_action( 'wp_create_file_in_uploads', $file, $attachment_id ); // For replication
782 return $this->finished();
783 } elseif ( $width > $max_width ) {
784 $oitar = $width / $max_width;
785 $image = wp_crop_image($attachment_id, 0, 0, $width, $height, $max_width, $height / $oitar, false, str_replace(basename($file), 'midsize-'.basename($file), $file));
786 if ( ! $image || is_wp_error( $image ) )
787 wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) );
789 /** This filter is documented in wp-admin/custom-header.php */
790 $image = apply_filters( 'wp_create_file_in_uploads', $image, $attachment_id ); // For replication
792 $url = str_replace(basename($url), basename($image), $url);
793 $width = $width / $oitar;
794 $height = $height / $oitar;
801 <h1><?php _e( 'Crop Header Image' ); ?></h1>
803 <form method="post" action="<?php echo esc_url(add_query_arg('step', 3)); ?>">
804 <p class="hide-if-no-js"><?php _e('Choose the part of the image you want to use as your header.'); ?></p>
805 <p class="hide-if-js"><strong><?php _e( 'You need JavaScript to choose a part of the image.'); ?></strong></p>
807 <div id="crop_image" style="position: relative">
808 <img src="<?php echo esc_url( $url ); ?>" id="upload" width="<?php echo $width; ?>" height="<?php echo $height; ?>" alt="" />
811 <input type="hidden" name="x1" id="x1" value="0"/>
812 <input type="hidden" name="y1" id="y1" value="0"/>
813 <input type="hidden" name="width" id="width" value="<?php echo esc_attr( $width ); ?>"/>
814 <input type="hidden" name="height" id="height" value="<?php echo esc_attr( $height ); ?>"/>
815 <input type="hidden" name="attachment_id" id="attachment_id" value="<?php echo esc_attr( $attachment_id ); ?>" />
816 <input type="hidden" name="oitar" id="oitar" value="<?php echo esc_attr( $oitar ); ?>" />
817 <?php if ( empty( $_POST ) && isset( $_GET['file'] ) ) { ?>
818 <input type="hidden" name="create-new-attachment" value="true" />
820 <?php wp_nonce_field( 'custom-header-crop-image' ) ?>
823 <?php submit_button( __( 'Crop and Publish' ), 'primary', 'submit', false ); ?>
825 if ( isset( $oitar ) && 1 == $oitar && ( current_theme_supports( 'custom-header', 'flex-height' ) || current_theme_supports( 'custom-header', 'flex-width' ) ) )
826 submit_button( __( 'Skip Cropping, Publish Image as Is' ), 'secondary', 'skip-cropping', false );
836 * Upload the file to be cropped in the second step.
840 public function step_2_manage_upload() {
841 $overrides = array('test_form' => false);
843 $uploaded_file = $_FILES['import'];
844 $wp_filetype = wp_check_filetype_and_ext( $uploaded_file['tmp_name'], $uploaded_file['name'] );
845 if ( ! wp_match_mime_types( 'image', $wp_filetype['type'] ) )
846 wp_die( __( 'The uploaded file is not a valid image. Please try again.' ) );
848 $file = wp_handle_upload($uploaded_file, $overrides);
850 if ( isset($file['error']) )
851 wp_die( $file['error'], __( 'Image Upload Error' ) );
854 $type = $file['type'];
855 $file = $file['file'];
856 $filename = basename($file);
858 // Construct the object array
860 'post_title' => $filename,
861 'post_content' => $url,
862 'post_mime_type' => $type,
864 'context' => 'custom-header'
868 $attachment_id = wp_insert_attachment( $object, $file );
869 return compact( 'attachment_id', 'file', 'filename', 'url', 'type' );
873 * Display third step of custom header image page.
876 * @since 4.4.0 Switched to using wp_get_attachment_url() instead of the guid
877 * for retrieving the header image URL.
879 public function step_3() {
880 check_admin_referer( 'custom-header-crop-image' );
882 if ( ! current_theme_supports( 'custom-header', 'uploads' ) ) {
884 '<h1>' . __( 'Cheatin’ uh?' ) . '</h1>' .
885 '<p>' . __( 'The current theme does not support uploading a custom header image.' ) . '</p>',
890 if ( ! empty( $_POST['skip-cropping'] ) && ! ( current_theme_supports( 'custom-header', 'flex-height' ) || current_theme_supports( 'custom-header', 'flex-width' ) ) ) {
892 '<h1>' . __( 'Cheatin’ uh?' ) . '</h1>' .
893 '<p>' . __( 'The current theme does not support a flexible sized header image.' ) . '</p>',
898 if ( $_POST['oitar'] > 1 ) {
899 $_POST['x1'] = $_POST['x1'] * $_POST['oitar'];
900 $_POST['y1'] = $_POST['y1'] * $_POST['oitar'];
901 $_POST['width'] = $_POST['width'] * $_POST['oitar'];
902 $_POST['height'] = $_POST['height'] * $_POST['oitar'];
905 $attachment_id = absint( $_POST['attachment_id'] );
906 $original = get_attached_file($attachment_id);
908 $dimensions = $this->get_header_dimensions( array(
909 'height' => $_POST['height'],
910 'width' => $_POST['width'],
912 $height = $dimensions['dst_height'];
913 $width = $dimensions['dst_width'];
915 if ( empty( $_POST['skip-cropping'] ) )
916 $cropped = wp_crop_image( $attachment_id, (int) $_POST['x1'], (int) $_POST['y1'], (int) $_POST['width'], (int) $_POST['height'], $width, $height );
917 elseif ( ! empty( $_POST['create-new-attachment'] ) )
918 $cropped = _copy_image_file( $attachment_id );
920 $cropped = get_attached_file( $attachment_id );
922 if ( ! $cropped || is_wp_error( $cropped ) )
923 wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) );
925 /** This filter is documented in wp-admin/custom-header.php */
926 $cropped = apply_filters( 'wp_create_file_in_uploads', $cropped, $attachment_id ); // For replication
928 $object = $this->create_attachment_object( $cropped, $attachment_id );
930 if ( ! empty( $_POST['create-new-attachment'] ) )
931 unset( $object['ID'] );
933 // Update the attachment
934 $attachment_id = $this->insert_attachment( $object, $cropped );
936 $url = wp_get_attachment_url( $attachment_id );
937 $this->set_header_image( compact( 'url', 'attachment_id', 'width', 'height' ) );
940 $medium = str_replace( basename( $original ), 'midsize-' . basename( $original ), $original );
941 if ( file_exists( $medium ) ) {
942 wp_delete_file( $medium );
945 if ( empty( $_POST['create-new-attachment'] ) && empty( $_POST['skip-cropping'] ) ) {
946 wp_delete_file( $original );
949 return $this->finished();
953 * Display last step of custom header image page.
957 public function finished() {
958 $this->updated = true;
963 * Display the page based on the current step.
967 public function admin_page() {
968 if ( ! current_user_can('edit_theme_options') )
969 wp_die(__('Sorry, you are not allowed to customize headers.'));
970 $step = $this->step();
973 elseif ( 3 == $step )
980 * Unused since 3.5.0.
984 * @param array $form_fields
985 * @return array $form_fields
987 public function attachment_fields_to_edit( $form_fields ) {
992 * Unused since 3.5.0.
997 * @return array $tabs
999 public function filter_upload_tabs( $tabs ) {
1004 * Choose a header image, selected from existing uploaded and default headers,
1005 * or provide an array of uploaded header data (either new, or from media library).
1009 * @param mixed $choice Which header image to select. Allows for values of 'random-default-image',
1010 * for randomly cycling among the default images; 'random-uploaded-image', for randomly cycling
1011 * among the uploaded images; the key of a default image registered for that theme; and
1012 * the key of an image uploaded for that theme (the attachment ID of the image).
1013 * Or an array of arguments: attachment_id, url, width, height. All are required.
1015 final public function set_header_image( $choice ) {
1016 if ( is_array( $choice ) || is_object( $choice ) ) {
1017 $choice = (array) $choice;
1018 if ( ! isset( $choice['attachment_id'] ) || ! isset( $choice['url'] ) )
1021 $choice['url'] = esc_url_raw( $choice['url'] );
1023 $header_image_data = (object) array(
1024 'attachment_id' => $choice['attachment_id'],
1025 'url' => $choice['url'],
1026 'thumbnail_url' => $choice['url'],
1027 'height' => $choice['height'],
1028 'width' => $choice['width'],
1031 update_post_meta( $choice['attachment_id'], '_wp_attachment_is_custom_header', get_stylesheet() );
1032 set_theme_mod( 'header_image', $choice['url'] );
1033 set_theme_mod( 'header_image_data', $header_image_data );
1037 if ( in_array( $choice, array( 'remove-header', 'random-default-image', 'random-uploaded-image' ) ) ) {
1038 set_theme_mod( 'header_image', $choice );
1039 remove_theme_mod( 'header_image_data' );
1043 $uploaded = get_uploaded_header_images();
1044 if ( $uploaded && isset( $uploaded[ $choice ] ) ) {
1045 $header_image_data = $uploaded[ $choice ];
1048 $this->process_default_headers();
1049 if ( isset( $this->default_headers[ $choice ] ) )
1050 $header_image_data = $this->default_headers[ $choice ];
1055 set_theme_mod( 'header_image', esc_url_raw( $header_image_data['url'] ) );
1056 set_theme_mod( 'header_image_data', $header_image_data );
1060 * Remove a header image.
1064 final public function remove_header_image() {
1065 $this->set_header_image( 'remove-header' );
1069 * Reset a header image to the default image for the theme.
1071 * This method does not do anything if the theme does not have a default header image.
1075 final public function reset_header_image() {
1076 $this->process_default_headers();
1077 $default = get_theme_support( 'custom-header', 'default-image' );
1080 $this->remove_header_image();
1083 $default = sprintf( $default, get_template_directory_uri(), get_stylesheet_directory_uri() );
1085 $default_data = array();
1086 foreach ( $this->default_headers as $header => $details ) {
1087 if ( $details['url'] == $default ) {
1088 $default_data = $details;
1093 set_theme_mod( 'header_image', $default );
1094 set_theme_mod( 'header_image_data', (object) $default_data );
1098 * Calculate width and height based on what the currently selected theme supports.
1100 * @param array $dimensions
1101 * @return array dst_height and dst_width of header image.
1103 final public function get_header_dimensions( $dimensions ) {
1105 $width = absint( $dimensions['width'] );
1106 $height = absint( $dimensions['height'] );
1107 $theme_height = get_theme_support( 'custom-header', 'height' );
1108 $theme_width = get_theme_support( 'custom-header', 'width' );
1109 $has_flex_width = current_theme_supports( 'custom-header', 'flex-width' );
1110 $has_flex_height = current_theme_supports( 'custom-header', 'flex-height' );
1111 $has_max_width = current_theme_supports( 'custom-header', 'max-width' ) ;
1112 $dst = array( 'dst_height' => null, 'dst_width' => null );
1114 // For flex, limit size of image displayed to 1500px unless theme says otherwise
1115 if ( $has_flex_width ) {
1119 if ( $has_max_width ) {
1120 $max_width = max( $max_width, get_theme_support( 'custom-header', 'max-width' ) );
1122 $max_width = max( $max_width, $theme_width );
1124 if ( $has_flex_height && ( ! $has_flex_width || $width > $max_width ) ) {
1125 $dst['dst_height'] = absint( $height * ( $max_width / $width ) );
1127 elseif ( $has_flex_height && $has_flex_width ) {
1128 $dst['dst_height'] = $height;
1131 $dst['dst_height'] = $theme_height;
1134 if ( $has_flex_width && ( ! $has_flex_height || $width > $max_width ) ) {
1135 $dst['dst_width'] = absint( $width * ( $max_width / $width ) );
1137 elseif ( $has_flex_width && $has_flex_height ) {
1138 $dst['dst_width'] = $width;
1141 $dst['dst_width'] = $theme_width;
1148 * Create an attachment 'object'.
1150 * @param string $cropped Cropped image URL.
1151 * @param int $parent_attachment_id Attachment ID of parent image.
1153 * @return array Attachment object.
1155 final public function create_attachment_object( $cropped, $parent_attachment_id ) {
1156 $parent = get_post( $parent_attachment_id );
1157 $parent_url = wp_get_attachment_url( $parent->ID );
1158 $url = str_replace( basename( $parent_url ), basename( $cropped ), $parent_url );
1160 $size = @getimagesize( $cropped );
1161 $image_type = ( $size ) ? $size['mime'] : 'image/jpeg';
1164 'ID' => $parent_attachment_id,
1165 'post_title' => basename($cropped),
1166 'post_mime_type' => $image_type,
1168 'context' => 'custom-header'
1175 * Insert an attachment and its metadata.
1177 * @param array $object Attachment object.
1178 * @param string $cropped Cropped image URL.
1180 * @return int Attachment ID.
1182 final public function insert_attachment( $object, $cropped ) {
1183 $attachment_id = wp_insert_attachment( $object, $cropped );
1184 $metadata = wp_generate_attachment_metadata( $attachment_id, $cropped );
1186 * Filters the header image attachment metadata.
1190 * @see wp_generate_attachment_metadata()
1192 * @param array $metadata Attachment metadata.
1194 $metadata = apply_filters( 'wp_header_image_attachment_metadata', $metadata );
1195 wp_update_attachment_metadata( $attachment_id, $metadata );
1196 return $attachment_id;
1200 * Gets attachment uploaded by Media Manager, crops it, then saves it as a
1201 * new object. Returns JSON-encoded object details.
1203 public function ajax_header_crop() {
1204 check_ajax_referer( 'image_editor-' . $_POST['id'], 'nonce' );
1206 if ( ! current_user_can( 'edit_theme_options' ) ) {
1207 wp_send_json_error();
1210 if ( ! current_theme_supports( 'custom-header', 'uploads' ) ) {
1211 wp_send_json_error();
1214 $crop_details = $_POST['cropDetails'];
1216 $dimensions = $this->get_header_dimensions( array(
1217 'height' => $crop_details['height'],
1218 'width' => $crop_details['width'],
1221 $attachment_id = absint( $_POST['id'] );
1223 $cropped = wp_crop_image(
1225 (int) $crop_details['x1'],
1226 (int) $crop_details['y1'],
1227 (int) $crop_details['width'],
1228 (int) $crop_details['height'],
1229 (int) $dimensions['dst_width'],
1230 (int) $dimensions['dst_height']
1233 if ( ! $cropped || is_wp_error( $cropped ) ) {
1234 wp_send_json_error( array( 'message' => __( 'Image could not be processed. Please go back and try again.' ) ) );
1237 /** This filter is documented in wp-admin/custom-header.php */
1238 $cropped = apply_filters( 'wp_create_file_in_uploads', $cropped, $attachment_id ); // For replication
1240 $object = $this->create_attachment_object( $cropped, $attachment_id );
1242 unset( $object['ID'] );
1244 $new_attachment_id = $this->insert_attachment( $object, $cropped );
1246 $object['attachment_id'] = $new_attachment_id;
1247 $object['url'] = wp_get_attachment_url( $new_attachment_id );;
1248 $object['width'] = $dimensions['dst_width'];
1249 $object['height'] = $dimensions['dst_height'];
1251 wp_send_json_success( $object );
1255 * Given an attachment ID for a header image, updates its "last used"
1258 * Triggered when the user tries adds a new header image from the
1259 * Media Manager, even if s/he doesn't save that change.
1261 public function ajax_header_add() {
1262 check_ajax_referer( 'header-add', 'nonce' );
1264 if ( ! current_user_can( 'edit_theme_options' ) ) {
1265 wp_send_json_error();
1268 $attachment_id = absint( $_POST['attachment_id'] );
1269 if ( $attachment_id < 1 ) {
1270 wp_send_json_error();
1273 $key = '_wp_attachment_custom_header_last_used_' . get_stylesheet();
1274 update_post_meta( $attachment_id, $key, time() );
1275 update_post_meta( $attachment_id, '_wp_attachment_is_custom_header', get_stylesheet() );
1277 wp_send_json_success();
1281 * Given an attachment ID for a header image, unsets it as a user-uploaded
1282 * header image for the current theme.
1284 * Triggered when the user clicks the overlay "X" button next to each image
1285 * choice in the Customizer's Header tool.
1287 public function ajax_header_remove() {
1288 check_ajax_referer( 'header-remove', 'nonce' );
1290 if ( ! current_user_can( 'edit_theme_options' ) ) {
1291 wp_send_json_error();
1294 $attachment_id = absint( $_POST['attachment_id'] );
1295 if ( $attachment_id < 1 ) {
1296 wp_send_json_error();
1299 $key = '_wp_attachment_custom_header_last_used_' . get_stylesheet();
1300 delete_post_meta( $attachment_id, $key );
1301 delete_post_meta( $attachment_id, '_wp_attachment_is_custom_header', get_stylesheet() );
1303 wp_send_json_success();
1308 * @param WP_Customize_Manager $wp_customize
1310 public function customize_set_last_used( $wp_customize ) {
1311 $data = $wp_customize->get_setting( 'header_image_data' )->post_value();
1313 if ( ! isset( $data['attachment_id'] ) ) {
1317 $attachment_id = $data['attachment_id'];
1318 $key = '_wp_attachment_custom_header_last_used_' . get_stylesheet();
1319 update_post_meta( $attachment_id, $key, time() );
1326 public function get_default_header_images() {
1327 $this->process_default_headers();
1329 // Get the default image if there is one.
1330 $default = get_theme_support( 'custom-header', 'default-image' );
1332 if ( ! $default ) { // If not,
1333 return $this->default_headers; // easy peasy.
1336 $default = sprintf( $default, get_template_directory_uri(), get_stylesheet_directory_uri() );
1337 $already_has_default = false;
1339 foreach ( $this->default_headers as $k => $h ) {
1340 if ( $h['url'] === $default ) {
1341 $already_has_default = true;
1346 if ( $already_has_default ) {
1347 return $this->default_headers;
1350 // If the one true image isn't included in the default set, prepend it.
1351 $header_images = array();
1352 $header_images['default'] = array(
1354 'thumbnail_url' => $default,
1355 'description' => 'Default'
1358 // The rest of the set comes after.
1359 return array_merge( $header_images, $this->default_headers );
1366 public function get_uploaded_header_images() {
1367 $header_images = get_uploaded_header_images();
1368 $timestamp_key = '_wp_attachment_custom_header_last_used_' . get_stylesheet();
1369 $alt_text_key = '_wp_attachment_image_alt';
1371 foreach ( $header_images as &$header_image ) {
1372 $header_meta = get_post_meta( $header_image['attachment_id'] );
1373 $header_image['timestamp'] = isset( $header_meta[ $timestamp_key ] ) ? $header_meta[ $timestamp_key ] : '';
1374 $header_image['alt_text'] = isset( $header_meta[ $alt_text_key ] ) ? $header_meta[ $alt_text_key ] : '';
1377 return $header_images;