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.
25 var $admin_header_callback;
28 * Callback for header div.
34 var $admin_image_div_callback;
37 * Holds default headers.
43 var $default_headers = array();
47 * Holds custom headers uploaded by the user
53 var $uploaded_headers = array();
56 * Holds the page menu hook.
65 * Constructor - Register administration header callback.
68 * @param callback $admin_header_callback
69 * @param callback $admin_image_div_callback Optional custom image div output callback.
70 * @return Custom_Image_Header
72 function __construct($admin_header_callback, $admin_image_div_callback = '') {
73 $this->admin_header_callback = $admin_header_callback;
74 $this->admin_image_div_callback = $admin_image_div_callback;
78 * Set up the hooks for the Custom Header admin page.
83 if ( ! current_user_can('edit_theme_options') )
86 $this->page = $page = add_theme_page(__('Header'), __('Header'), 'edit_theme_options', 'custom-header', array(&$this, 'admin_page'));
88 add_action("admin_print_scripts-$page", array(&$this, 'js_includes'));
89 add_action("admin_print_styles-$page", array(&$this, 'css_includes'));
90 add_action("admin_head-$page", array(&$this, 'help') );
91 add_action("admin_head-$page", array(&$this, 'take_action'), 50);
92 add_action("admin_head-$page", array(&$this, 'js'), 50);
93 add_action("admin_head-$page", $this->admin_header_callback, 51);
97 * Adds contextual help.
102 add_contextual_help( $this->page, '<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.' ) . '</p>' .
103 '<p>' . __( 'If you want to discard your custom header and go back to the default included in your theme, click on the buttons to remove the custom image and restore the original header image.' ) . '</p>' .
104 '<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>' .
105 '<p><strong>' . __( 'For more information:' ) . '</strong></p>' .
106 '<p>' . __( '<a href="http://codex.wordpress.org/Appearance_Header_Screen" target="_blank">Documentation on Custom Header</a>' ) . '</p>' .
107 '<p>' . __( '<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>' ) . '</p>' );
111 * Get the current step.
115 * @return int Current step
118 if ( ! isset( $_GET['step'] ) )
121 $step = (int) $_GET['step'];
122 if ( $step < 1 || 3 < $step )
129 * Set up the enqueue for the JavaScript files.
133 function js_includes() {
134 $step = $this->step();
136 if ( ( 1 == $step || 3 == $step ) && $this->header_text() )
137 wp_enqueue_script('farbtastic');
138 elseif ( 2 == $step )
139 wp_enqueue_script('imgareaselect');
143 * Set up the enqueue for the CSS files
147 function css_includes() {
148 $step = $this->step();
150 if ( ( 1 == $step || 3 == $step ) && $this->header_text() )
151 wp_enqueue_style('farbtastic');
152 elseif ( 2 == $step )
153 wp_enqueue_style('imgareaselect');
157 * Check if header text is allowed
161 function header_text() {
162 if ( defined( 'NO_HEADER_TEXT' ) && NO_HEADER_TEXT )
169 * Execute custom header modification.
173 function take_action() {
174 if ( ! current_user_can('edit_theme_options') )
177 if ( empty( $_POST ) )
180 $this->updated = true;
182 if ( isset( $_POST['resetheader'] ) ) {
183 check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
184 remove_theme_mod( 'header_image' );
188 if ( isset( $_POST['resettext'] ) ) {
189 check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
190 remove_theme_mod('header_textcolor');
194 if ( isset( $_POST['removeheader'] ) ) {
195 check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
196 set_theme_mod( 'header_image', 'remove-header' );
200 if ( isset( $_POST['text-color'] ) ) {
201 check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
202 $_POST['text-color'] = str_replace( '#', '', $_POST['text-color'] );
203 if ( 'blank' == $_POST['text-color'] ) {
204 set_theme_mod( 'header_textcolor', 'blank' );
206 $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['text-color']);
207 if ( strlen($color) == 6 || strlen($color) == 3 )
208 set_theme_mod('header_textcolor', $color);
212 if ( isset( $_POST['default-header'] ) ) {
213 check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
214 if ( 'random-default-image' == $_POST['default-header'] ) {
215 set_theme_mod( 'header_image', 'random-default-image' );
216 } elseif ( 'random-uploaded-image' == $_POST['default-header'] ) {
217 set_theme_mod( 'header_image', 'random-uploaded-image' );
219 $this->process_default_headers();
220 $uploaded = get_uploaded_header_images();
221 if ( isset( $uploaded[$_POST['default-header']] ) )
222 set_theme_mod( 'header_image', esc_url( $uploaded[$_POST['default-header']]['url'] ) );
223 elseif ( isset( $this->default_headers[$_POST['default-header']] ) )
224 set_theme_mod( 'header_image', esc_url( $this->default_headers[$_POST['default-header']]['url'] ) );
230 * Process the default headers
234 function process_default_headers() {
235 global $_wp_default_headers;
237 if ( !empty($this->headers) )
240 if ( !isset($_wp_default_headers) )
243 $this->default_headers = $_wp_default_headers;
244 foreach ( array_keys($this->default_headers) as $header ) {
245 $this->default_headers[$header]['url'] = sprintf( $this->default_headers[$header]['url'], get_template_directory_uri(), get_stylesheet_directory_uri() );
246 $this->default_headers[$header]['thumbnail_url'] = sprintf( $this->default_headers[$header]['thumbnail_url'], get_template_directory_uri(), get_stylesheet_directory_uri() );
252 * Display UI for selecting one of several default headers.
254 * Show the random image option if this theme has multiple header images.
255 * Random image option is on by default if no header has been set.
259 function show_header_selector( $type = 'default' ) {
260 if ( 'default' == $type ) {
261 $headers = $this->default_headers;
263 $headers = get_uploaded_header_images();
267 if ( 1 < count( $headers ) ) {
268 echo '<div class="random-header">';
269 echo '<label><input name="default-header" type="radio" value="random-' . $type . '-image"' . checked( is_random_header_image( $type ), true, false ) . ' />';
270 echo __( '<strong>Random:</strong> Show a different image on each page.' );
275 echo '<div class="available-headers">';
276 foreach ( $headers as $header_key => $header ) {
277 $header_thumbnail = $header['thumbnail_url'];
278 $header_url = $header['url'];
279 $header_desc = empty( $header['description'] ) ? '' : $header['description'];
280 echo '<div class="default-header">';
281 echo '<label><input name="default-header" type="radio" value="' . esc_attr( $header_key ) . '" ' . checked( $header_url, get_theme_mod( 'header_image' ), false ) . ' />';
283 if ( !empty( $header['uploaded'] ) )
284 $width = ' width="230"';
285 echo '<img src="' . $header_thumbnail . '" alt="' . esc_attr( $header_desc ) .'" title="' . esc_attr( $header_desc ) . '"' . $width . ' /></label>';
288 echo '<div class="clear"></div></div>';
292 * Execute Javascript depending on step.
297 $step = $this->step();
298 if ( ( 1 == $step || 3 == $step ) && $this->header_text() )
300 elseif ( 2 == $step )
305 * Display Javascript based on Step 1 and 3.
310 <script type="text/javascript">
312 var text_objects = ['#name', '#desc', '#text-color-row'];
314 var default_color = '#<?php echo HEADER_TEXTCOLOR; ?>';
315 var old_color = null;
317 function pickColor(color) {
318 jQuery('#name').css('color', color);
319 jQuery('#desc').css('color', color);
320 jQuery('#text-color').val(color);
321 farbtastic.setColor(color);
324 function toggle_text(s) {
325 if (jQuery(s).attr('id') == 'showtext' && jQuery('#text-color').val() != 'blank')
328 if (jQuery(s).attr('id') == 'hidetext' && jQuery('#text-color').val() == 'blank')
331 if (jQuery('#text-color').val() == 'blank') {
333 if (old_color == '#blank')
334 old_color = default_color;
336 jQuery( text_objects.toString() ).show();
337 jQuery('#text-color').val(old_color);
338 jQuery('#name').css('color', old_color);
339 jQuery('#desc').css('color', old_color);
340 pickColor(old_color);
343 jQuery( text_objects.toString() ).hide();
344 old_color = jQuery('#text-color').val();
345 jQuery('#text-color').val('blank');
349 jQuery(document).ready(function() {
350 jQuery('#pickcolor').click(function() {
351 jQuery('#color-picker').show();
354 jQuery('input[name="hidetext"]').click(function() {
358 jQuery('#defaultcolor').click(function() {
359 pickColor(default_color);
360 jQuery('#text-color').val(default_color)
363 jQuery('#text-color').keyup(function() {
364 var _hex = jQuery('#text-color').val();
368 hex = hex.replace(/[^#a-fA-F0-9]+/, '');
370 jQuery('#text-color').val(hex);
371 if ( hex.length == 4 || hex.length == 7 )
375 jQuery(document).mousedown(function(){
376 jQuery('#color-picker').each( function() {
377 var display = jQuery(this).css('display');
378 if (display == 'block')
379 jQuery(this).fadeOut(2);
383 farbtastic = jQuery.farbtastic('#color-picker', function(color) { pickColor(color); });
384 <?php if ( $color = get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?>
385 pickColor('#<?php echo $color; ?>');
388 <?php if ( 'blank' == get_theme_mod( 'header_textcolor', HEADER_TEXTCOLOR ) || '' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) || ! $this->header_text() ) { ?>
398 * Display Javascript based on Step 2.
403 <script type="text/javascript">
405 function onEndCrop( coords ) {
406 jQuery( '#x1' ).val(coords.x);
407 jQuery( '#y1' ).val(coords.y);
408 jQuery( '#width' ).val(coords.w);
409 jQuery( '#height' ).val(coords.h);
412 jQuery(document).ready(function() {
413 var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>;
414 var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>;
415 var ratio = xinit / yinit;
416 var ximg = jQuery('img#upload').width();
417 var yimg = jQuery('img#upload').height();
419 if ( yimg < yinit || ximg < xinit ) {
420 if ( ximg / yimg > ratio ) {
422 xinit = yinit * ratio;
425 yinit = xinit / ratio;
429 jQuery('img#upload').imgAreaSelect({
432 aspectRatio: xinit + ':' + yinit,
438 maxHeight: <?php echo HEADER_IMAGE_HEIGHT; ?>,
439 maxWidth: <?php echo HEADER_IMAGE_WIDTH; ?>,
440 onInit: function () {
441 jQuery('#width').val(xinit);
442 jQuery('#height').val(yinit);
444 onSelectChange: function(img, c) {
445 jQuery('#x1').val(c.x1);
446 jQuery('#y1').val(c.y1);
447 jQuery('#width').val(c.width);
448 jQuery('#height').val(c.height);
458 * Display first step of custom header image page.
463 $this->process_default_headers();
467 <?php screen_icon(); ?>
468 <h2><?php _e('Custom Header'); ?></h2>
470 <?php if ( ! empty( $this->updated ) ) { ?>
471 <div id="message" class="updated">
472 <p><?php printf( __( 'Header updated. <a href="%s">Visit your site</a> to see how it looks.' ), home_url( '/' ) ); ?></p>
476 <table class="form-table">
481 <th scope="row"><?php _e( 'Preview' ); ?></th>
483 <?php if ( $this->admin_image_div_callback ) {
484 call_user_func( $this->admin_image_div_callback );
487 <div id="headimg" style="max-width:<?php echo HEADER_IMAGE_WIDTH; ?>px;height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;background-image:url(<?php esc_url ( header_image() ) ?>);">
489 if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) || '' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) || ! $this->header_text() )
490 $style = ' style="display:none;"';
492 $style = ' style="color:#' . get_theme_mod( 'header_textcolor', HEADER_TEXTCOLOR ) . ';"';
494 <h1><a id="name"<?php echo $style; ?> onclick="return false;" href="<?php bloginfo('url'); ?>"><?php bloginfo( 'name' ); ?></a></h1>
495 <div id="desc"<?php echo $style; ?>><?php bloginfo( 'description' ); ?></div>
500 <?php if ( current_theme_supports( 'custom-header-uploads' ) ) : ?>
502 <th scope="row"><?php _e( 'Upload Image' ); ?></th>
504 <p><?php _e( 'You can upload a custom header image to be shown at the top of your site instead of the default one. On the next screen you will be able to crop the image.' ); ?><br />
505 <?php printf( __( 'Images of exactly <strong>%1$d × %2$d pixels</strong> will be used as-is.' ), HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT ); ?></p>
506 <form enctype="multipart/form-data" id="upload-form" method="post" action="<?php echo esc_attr( add_query_arg( 'step', 2 ) ) ?>">
508 <label for="upload"><?php _e( 'Choose an image from your computer:' ); ?></label><br />
509 <input type="file" id="upload" name="import" />
510 <input type="hidden" name="action" value="save" />
511 <?php wp_nonce_field( 'custom-header-upload', '_wpnonce-custom-header-upload' ) ?>
512 <?php submit_button( __( 'Upload' ), 'button', 'submit', false ); ?>
521 <form method="post" action="<?php echo esc_attr( add_query_arg( 'step', 1 ) ) ?>">
522 <table class="form-table">
524 <?php if ( get_uploaded_header_images() ) : ?>
526 <th scope="row"><?php _e( 'Uploaded Images' ); ?></th>
528 <p><?php _e( 'You can choose one of your previously uploaded headers, or show a random one.' ) ?></p>
530 $this->show_header_selector( 'uploaded' );
535 if ( ! empty( $this->default_headers ) ) : ?>
537 <th scope="row"><?php _e( 'Default Images' ); ?></th>
539 <?php if ( current_theme_supports( 'custom-header-uploads' ) ) : ?>
540 <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>
542 <p><?php _e( 'You can use one of these cool headers or show a random one on each page.' ) ?></p>
545 $this->show_header_selector( 'default' );
550 if ( get_header_image() ) : ?>
552 <th scope="row"><?php _e( 'Remove Image' ); ?></th>
554 <p><?php _e( 'This will remove the header image. You will not be able to restore any customizations.' ) ?></p>
555 <?php submit_button( __( 'Remove Header Image' ), 'button', 'removeheader', false ); ?>
560 if ( defined( 'HEADER_IMAGE' ) && '' != HEADER_IMAGE ) : ?>
562 <th scope="row"><?php _e( 'Reset Image' ); ?></th>
564 <p><?php _e( 'This will restore the original header image. You will not be able to restore any customizations.' ) ?></p>
565 <?php submit_button( __( 'Restore Original Header Image' ), 'button', 'resetheader', false ); ?>
572 <?php if ( $this->header_text() ) : ?>
573 <table class="form-table">
575 <tr valign="top" class="hide-if-no-js">
576 <th scope="row"><?php _e( 'Display Text' ); ?></th>
579 <?php $hidetext = get_theme_mod( 'header_textcolor', HEADER_TEXTCOLOR ); ?>
580 <label><input type="radio" value="1" name="hidetext" id="hidetext"<?php checked( ( 'blank' == $hidetext || empty( $hidetext ) ) ? true : false ); ?> /> <?php _e( 'No' ); ?></label>
581 <label><input type="radio" value="0" name="hidetext" id="showtext"<?php checked( ( 'blank' == $hidetext || empty( $hidetext ) ) ? false : true ); ?> /> <?php _e( 'Yes' ); ?></label>
586 <tr valign="top" id="text-color-row">
587 <th scope="row"><?php _e( 'Text Color' ); ?></th>
590 <input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_theme_mod( 'header_textcolor', HEADER_TEXTCOLOR ) ); ?>" />
591 <span class="description hide-if-js"><?php _e( 'If you want to hide header text, add <strong>#blank</strong> as text color.' );?></span>
592 <input type="button" class="button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color' ); ?>" id="pickcolor" />
594 <div id="color-picker" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
598 <?php if ( defined('HEADER_TEXTCOLOR') && get_theme_mod('header_textcolor') ) { ?>
600 <th scope="row"><?php _e('Reset Text Color'); ?></th>
602 <p><?php _e( 'This will restore the original header text. You will not be able to restore any customizations.' ) ?></p>
603 <?php submit_button( __( 'Restore Original Header Text' ), 'button', 'resettext', false ); ?>
612 do_action( 'custom_header_options' );
614 wp_nonce_field( 'custom-header-options', '_wpnonce-custom-header-options' ); ?>
616 <?php submit_button( null, 'primary', 'save-header-options' ); ?>
623 * Display second step of custom header image page.
628 check_admin_referer('custom-header-upload', '_wpnonce-custom-header-upload');
629 if ( ! current_theme_supports( 'custom-header-uploads' ) )
630 wp_die( 'Cheatin’ uh?' );
632 $overrides = array('test_form' => false);
633 $file = wp_handle_upload($_FILES['import'], $overrides);
635 if ( isset($file['error']) )
636 wp_die( $file['error'], __( 'Image Upload Error' ) );
639 $type = $file['type'];
640 $file = $file['file'];
641 $filename = basename($file);
643 // Construct the object array
645 'post_title' => $filename,
646 'post_content' => $url,
647 'post_mime_type' => $type,
649 'context' => 'custom-header'
653 $id = wp_insert_attachment($object, $file);
655 list($width, $height, $type, $attr) = getimagesize( $file );
657 if ( $width == HEADER_IMAGE_WIDTH && $height == HEADER_IMAGE_HEIGHT ) {
659 wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) );
660 update_post_meta( $id, '_wp_attachment_is_custom_header', get_option('stylesheet' ) );
662 set_theme_mod('header_image', esc_url($url));
663 do_action('wp_create_file_in_uploads', $file, $id); // For replication
664 return $this->finished();
665 } elseif ( $width > HEADER_IMAGE_WIDTH ) {
666 $oitar = $width / HEADER_IMAGE_WIDTH;
667 $image = wp_crop_image($file, 0, 0, $width, $height, HEADER_IMAGE_WIDTH, $height / $oitar, false, str_replace(basename($file), 'midsize-'.basename($file), $file));
668 if ( is_wp_error( $image ) )
669 wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) );
671 $image = apply_filters('wp_create_file_in_uploads', $image, $id); // For replication
673 $url = str_replace(basename($url), basename($image), $url);
674 $width = $width / $oitar;
675 $height = $height / $oitar;
682 <?php screen_icon(); ?>
683 <h2><?php _e( 'Crop Header Image' ); ?></h2>
685 <form method="post" action="<?php echo esc_attr(add_query_arg('step', 3)); ?>">
686 <p class="hide-if-no-js"><?php _e('Choose the part of the image you want to use as your header.'); ?></p>
687 <p class="hide-if-js"><strong><?php _e( 'You need Javascript to choose a part of the image.'); ?></strong></p>
689 <div id="crop_image" style="position: relative">
690 <img src="<?php echo esc_url( $url ); ?>" id="upload" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
693 <input type="hidden" name="x1" id="x1" value="0"/>
694 <input type="hidden" name="y1" id="y1" value="0"/>
695 <input type="hidden" name="width" id="width" value="<?php echo esc_attr( $width ); ?>"/>
696 <input type="hidden" name="height" id="height" value="<?php echo esc_attr( $height ); ?>"/>
697 <input type="hidden" name="attachment_id" id="attachment_id" value="<?php echo esc_attr( $id ); ?>" />
698 <input type="hidden" name="oitar" id="oitar" value="<?php echo esc_attr( $oitar ); ?>" />
699 <?php wp_nonce_field( 'custom-header-crop-image' ) ?>
701 <?php submit_button( __( 'Crop and Publish' ) ); ?>
709 * Display third step of custom header image page.
714 check_admin_referer('custom-header-crop-image');
715 if ( ! current_theme_supports( 'custom-header-uploads' ) )
716 wp_die( 'Cheatin’ uh?' );
718 if ( $_POST['oitar'] > 1 ) {
719 $_POST['x1'] = $_POST['x1'] * $_POST['oitar'];
720 $_POST['y1'] = $_POST['y1'] * $_POST['oitar'];
721 $_POST['width'] = $_POST['width'] * $_POST['oitar'];
722 $_POST['height'] = $_POST['height'] * $_POST['oitar'];
725 $attachment_id = absint( $_POST['attachment_id'] );
726 $original = get_attached_file($attachment_id);
728 $cropped = wp_crop_image( $attachment_id, (int) $_POST['x1'], (int) $_POST['y1'], (int) $_POST['width'], (int) $_POST['height'], HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT );
729 if ( is_wp_error( $cropped ) )
730 wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) );
732 $cropped = apply_filters('wp_create_file_in_uploads', $cropped, $attachment_id); // For replication
734 $parent = get_post($attachment_id);
735 $parent_url = $parent->guid;
736 $url = str_replace(basename($parent_url), basename($cropped), $parent_url);
738 // Construct the object array
740 'ID' => $attachment_id,
741 'post_title' => basename($cropped),
742 'post_content' => $url,
743 'post_mime_type' => 'image/jpeg',
745 'context' => 'custom-header'
748 // Update the attachment
749 wp_insert_attachment($object, $cropped);
750 wp_update_attachment_metadata( $attachment_id, wp_generate_attachment_metadata( $attachment_id, $cropped ) );
751 update_post_meta( $attachment_id, '_wp_attachment_is_custom_header', get_option('stylesheet' ) );
753 set_theme_mod('header_image', $url);
756 $medium = str_replace(basename($original), 'midsize-'.basename($original), $original);
757 @unlink( apply_filters( 'wp_delete_file', $medium ) );
758 @unlink( apply_filters( 'wp_delete_file', $original ) );
760 return $this->finished();
764 * Display last step of custom header image page.
768 function finished() {
769 $this->updated = true;
774 * Display the page based on the current step.
778 function admin_page() {
779 if ( ! current_user_can('edit_theme_options') )
780 wp_die(__('You do not have permission to customize headers.'));
781 $step = $this->step();
784 elseif ( 2 == $step )
786 elseif ( 3 == $step )