1<?php
2/**
3 * The custom background script.
4 *
5 * @package WordPress
6 * @subpackage Administration
7 */
8
9/**
10 * The custom background class.
11 *
12 * @since 3.0.0
13 */
14#[AllowDynamicProperties]
15class Custom_Background {
16
17 /**
18 * Callback for administration header.
19 *
20 * @since 3.0.0
21 * @var callable
22 */
23 public $admin_header_callback;
24
25 /**
26 * Callback for header div.
27 *
28 * @since 3.0.0
29 * @var callable
30 */
31 public $admin_image_div_callback;
32
33 /**
34 * Used to trigger a success message when settings updated and set to true.
35 *
36 * @since 3.0.0
37 * @var bool
38 */
39 private $updated;
40
41 /**
42 * Constructor - Registers administration header callback.
43 *
44 * @since 3.0.0
45 *
46 * @param callable $admin_header_callback Optional. Administration header callback.
47 * Default empty string.
48 * @param callable $admin_image_div_callback Optional. Custom image div output callback.
49 * Default empty string.
50 */
51 public function __construct( $admin_header_callback = '', $admin_image_div_callback = '' ) {
52 $this->admin_header_callback = $admin_header_callback;
53 $this->admin_image_div_callback = $admin_image_div_callback;
54
55 add_action( 'admin_menu', array( $this, 'init' ) );
56
57 add_action( 'wp_ajax_custom-background-add', array( $this, 'ajax_background_add' ) );
58
59 // Unused since 3.5.0.
60 add_action( 'wp_ajax_set-background-image', array( $this, 'wp_set_background_image' ) );
61 }
62
63 /**
64 * Sets up the hooks for the Custom Background admin page.
65 *
66 * @since 3.0.0
67 */
68 public function init() {
69 $page = add_theme_page(
70 _x( 'Background', 'custom background' ),
71 _x( 'Background', 'custom background' ),
72 'edit_theme_options',
73 'custom-background',
74 array( $this, 'admin_page' )
75 );
76
77 if ( ! $page ) {
78 return;
79 }
80
81 add_action( "load-{$page}", array( $this, 'admin_load' ) );
82 add_action( "load-{$page}", array( $this, 'take_action' ), 49 );
83 add_action( "load-{$page}", array( $this, 'handle_upload' ), 49 );
84
85 if ( $this->admin_header_callback ) {
86 add_action( "admin_head-{$page}", $this->admin_header_callback, 51 );
87 }
88 }
89
90 /**
91 * Sets up the enqueue for the CSS & JavaScript files.
92 *
93 * @since 3.0.0
94 */
95 public function admin_load() {
96 get_current_screen()->add_help_tab(
97 array(
98 'id' => 'overview',
99 'title' => __( 'Overview' ),
100 'content' =>
101 '<p>' . __( 'You can customize the look of your site without touching any of your theme’s code by using a custom background. Your background can be an image or a color.' ) . '</p>' .
102 '<p>' . __( 'To use a background image, simply upload it or choose an image that has already been uploaded to your Media Library by clicking the “Choose Image” button. You can display a single instance of your image, or tile it to fill the screen. You can have your background fixed in place, so your site content moves on top of it, or you can have it scroll with your site.' ) . '</p>' .
103 '<p>' . __( 'You can also choose a background color 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>' .
104 '<p>' . __( 'Do not forget to click on the Save Changes button when you are finished.' ) . '</p>',
105 )
106 );
107
108 get_current_screen()->set_help_sidebar(
109 '<p><strong>' . __( 'For more information:' ) . '</strong></p>' .
110 '<p>' . __( '<a href="https://codex.wordpress.org/Appearance_Background_Screen">Documentation on Custom Background</a>' ) . '</p>' .
111 '<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
112 );
113
114 wp_enqueue_media();
115 wp_enqueue_script( 'custom-background' );
116 wp_enqueue_style( 'wp-color-picker' );
117 }
118
119 /**
120 * Executes custom background modification.
121 *
122 * @since 3.0.0
123 */
124 public function take_action() {
125 if ( empty( $_POST ) ) {
126 return;
127 }
128
129 if ( isset( $_POST['reset-background'] ) ) {
130 check_admin_referer( 'custom-background-reset', '_wpnonce-custom-background-reset' );
131
132 remove_theme_mod( 'background_image' );
133 remove_theme_mod( 'background_image_thumb' );
134
135 $this->updated = true;
136 return;
137 }
138
139 if ( isset( $_POST['remove-background'] ) ) {
140 // @todo Uploaded files are not removed here.
141 check_admin_referer( 'custom-background-remove', '_wpnonce-custom-background-remove' );
142
143 set_theme_mod( 'background_image', '' );
144 set_theme_mod( 'background_image_thumb', '' );
145
146 $this->updated = true;
147 wp_safe_redirect( $_POST['_wp_http_referer'] );
148 return;
149 }
150
151 if ( isset( $_POST['background-preset'] ) ) {
152 check_admin_referer( 'custom-background' );
153
154 if ( in_array( $_POST['background-preset'], array( 'default', 'fill', 'fit', 'repeat', 'custom' ), true ) ) {
155 $preset = $_POST['background-preset'];
156 } else {
157 $preset = 'default';
158 }
159
160 set_theme_mod( 'background_preset', $preset );
161 }
162
163 if ( isset( $_POST['background-position'] ) ) {
164 check_admin_referer( 'custom-background' );
165
166 $position = explode( ' ', $_POST['background-position'] );
167
168 if ( in_array( $position[0], array( 'left', 'center', 'right' ), true ) ) {
169 $position_x = $position[0];
170 } else {
171 $position_x = 'left';
172 }
173
174 if ( in_array( $position[1], array( 'top', 'center', 'bottom' ), true ) ) {
175 $position_y = $position[1];
176 } else {
177 $position_y = 'top';
178 }
179
180 set_theme_mod( 'background_position_x', $position_x );
181 set_theme_mod( 'background_position_y', $position_y );
182 }
183
184 if ( isset( $_POST['background-size'] ) ) {
185 check_admin_referer( 'custom-background' );
186
187 if ( in_array( $_POST['background-size'], array( 'auto', 'contain', 'cover' ), true ) ) {
188 $size = $_POST['background-size'];
189 } else {
190 $size = 'auto';
191 }
192
193 set_theme_mod( 'background_size', $size );
194 }
195
196 if ( isset( $_POST['background-repeat'] ) ) {
197 check_admin_referer( 'custom-background' );
198
199 $repeat = $_POST['background-repeat'];
200
201 if ( 'no-repeat' !== $repeat ) {
202 $repeat = 'repeat';
203 }
204
205 set_theme_mod( 'background_repeat', $repeat );
206 }
207
208 if ( isset( $_POST['background-attachment'] ) ) {
209 check_admin_referer( 'custom-background' );
210
211 $attachment = $_POST['background-attachment'];
212
213 if ( 'fixed' !== $attachment ) {
214 $attachment = 'scroll';
215 }
216
217 set_theme_mod( 'background_attachment', $attachment );
218 }
219
220 if ( isset( $_POST['background-color'] ) ) {
221 check_admin_referer( 'custom-background' );
222
223 $color = preg_replace( '/[^0-9a-fA-F]/', '', $_POST['background-color'] );
224
225 if ( strlen( $color ) === 6 || strlen( $color ) === 3 ) {
226 set_theme_mod( 'background_color', $color );
227 } else {
228 set_theme_mod( 'background_color', '' );
229 }
230 }
231
232 $this->updated = true;
233 }
234
235 /**
236 * Displays the custom background page.
237 *
238 * @since 3.0.0
239 */
240 public function admin_page() {
241 ?>
242<div class="wrap" id="custom-background">
243<h1><?php _e( 'Custom Background' ); ?></h1>
244
245 <?php
246 if ( current_user_can( 'customize' ) ) {
247 $message = sprintf(
248 /* translators: %s: URL to background image configuration in Customizer. */
249 __( 'You can now manage and live-preview Custom Backgrounds in the <a href="%s">Customizer</a>.' ),
250 admin_url( 'customize.php?autofocus[control]=background_image' )
251 );
252 wp_admin_notice(
253 $message,
254 array(
255 'type' => 'info',
256 'additional_classes' => array( 'hide-if-no-customize' ),
257 )
258 );
259 }
260
261 if ( ! empty( $this->updated ) ) {
262 $updated_message = sprintf(
263 /* translators: %s: Home URL. */
264 __( 'Background updated. <a href="%s">Visit your site</a> to see how it looks.' ),
265 esc_url( home_url( '/' ) )
266 );
267 wp_admin_notice(
268 $updated_message,
269 array(
270 'id' => 'message',
271 'additional_classes' => array( 'updated' ),
272 )
273 );
274 }
275 ?>
276
277<h2><?php _e( 'Background Image' ); ?></h2>
278
279<table class="form-table" role="presentation">
280<tbody>
281<tr>
282<th scope="row"><?php _e( 'Preview' ); ?></th>
283<td>
284 <?php
285 if ( $this->admin_image_div_callback ) {
286 call_user_func( $this->admin_image_div_callback );
287 } else {
288 $background_styles = '';
289 $bgcolor = get_background_color();
290 if ( $bgcolor ) {
291 $background_styles .= 'background-color: ' . maybe_hash_hex_color( $bgcolor ) . ';';
292 }
293
294 $background_image_thumb = get_background_image();
295 if ( $background_image_thumb ) {
296 $background_image_thumb = esc_url( set_url_scheme( get_theme_mod( 'background_image_thumb', str_replace( '%', '%%', $background_image_thumb ) ) ) );
297 $background_position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
298 $background_position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) );
299 $background_size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) );
300 $background_repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
301 $background_attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
302
303 // Background-image URL must be single quote, see below.
304 $background_styles .= " background-image: url('$background_image_thumb');"
305 . " background-size: $background_size;"
306 . " background-position: $background_position_x $background_position_y;"
307 . " background-repeat: $background_repeat;"
308 . " background-attachment: $background_attachment;";
309 }
310 ?>
311 <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // Must be double quote, see above. ?>
312 <?php if ( $background_image_thumb ) { ?>
313 <img class="custom-background-image" src="<?php echo $background_image_thumb; ?>" style="visibility:hidden;" alt="" /><br />
314 <img class="custom-background-image" src="<?php echo $background_image_thumb; ?>" style="visibility:hidden;" alt="" />
315 <?php } ?>
316 </div>
317 <?php } ?>
318</td>
319</tr>
320
321 <?php if ( get_background_image() ) : ?>
322<tr>
323<th scope="row"><?php _e( 'Remove Image' ); ?></th>
324<td>
325<form method="post">
326 <?php wp_nonce_field( 'custom-background-remove', '_wpnonce-custom-background-remove' ); ?>
327 <?php submit_button( __( 'Remove Background Image' ), '', 'remove-background', false ); ?><br />
328 <?php _e( 'This will remove the background image. You will not be able to restore any customizations.' ); ?>
329</form>
330</td>
331</tr>
332 <?php endif; ?>
333
334 <?php $default_image = get_theme_support( 'custom-background', 'default-image' ); ?>
335 <?php if ( $default_image && get_background_image() !== $default_image ) : ?>
336<tr>
337<th scope="row"><?php _e( 'Restore Original Image' ); ?></th>
338<td>
339<form method="post">
340 <?php wp_nonce_field( 'custom-background-reset', '_wpnonce-custom-background-reset' ); ?>
341 <?php submit_button( __( 'Restore Original Image' ), '', 'reset-background', false ); ?><br />
342 <?php _e( 'This will restore the original background image. You will not be able to restore any customizations.' ); ?>
343</form>
344</td>
345</tr>
346 <?php endif; ?>
347
348 <?php if ( current_user_can( 'upload_files' ) ) : ?>
349<tr>
350<th scope="row"><?php _e( 'Select Image' ); ?></th>
351<td><form enctype="multipart/form-data" id="upload-form" class="wp-upload-form" method="post">
352 <p>
353 <label for="upload"><?php _e( 'Choose an image from your computer:' ); ?></label><br />
354 <input type="file" id="upload" name="import" />
355 <input type="hidden" name="action" value="save" />
356 <?php wp_nonce_field( 'custom-background-upload', '_wpnonce-custom-background-upload' ); ?>
357 <?php submit_button( _x( 'Upload', 'verb' ), '', 'submit', false ); ?>
358 </p>
359 <p>
360 <label for="choose-from-library-link"><?php _e( 'Or choose an image from your media library:' ); ?></label><br />
361 <button id="choose-from-library-link" class="button"
362 data-choose="<?php esc_attr_e( 'Choose a Background Image' ); ?>"
363 data-update="<?php esc_attr_e( 'Set as background' ); ?>"><?php _e( 'Choose Image' ); ?></button>
364 </p>
365 </form>
366</td>
367</tr>
368 <?php endif; ?>
369</tbody>
370</table>
371
372<h2><?php _e( 'Display Options' ); ?></h2>
373<form method="post">
374<table class="form-table" role="presentation">
375<tbody>
376 <?php if ( get_background_image() ) : ?>
377<input name="background-preset" type="hidden" value="custom">
378
379 <?php
380 $background_position_title = __( 'Image Position' );
381
382 $background_position = sprintf(
383 '%s %s',
384 get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ),
385 get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) )
386 );
387
388 $background_position_options = array(
389 array(
390 'left top' => array(
391 'label' => __( 'Top Left' ),
392 'icon' => 'dashicons dashicons-arrow-left-alt',
393 ),
394 'center top' => array(
395 'label' => __( 'Top' ),
396 'icon' => 'dashicons dashicons-arrow-up-alt',
397 ),
398 'right top' => array(
399 'label' => __( 'Top Right' ),
400 'icon' => 'dashicons dashicons-arrow-right-alt',
401 ),
402 ),
403 array(
404 'left center' => array(
405 'label' => __( 'Left' ),
406 'icon' => 'dashicons dashicons-arrow-left-alt',
407 ),
408 'center center' => array(
409 'label' => __( 'Center' ),
410 'icon' => 'background-position-center-icon',
411 ),
412 'right center' => array(
413 'label' => __( 'Right' ),
414 'icon' => 'dashicons dashicons-arrow-right-alt',
415 ),
416 ),
417 array(
418 'left bottom' => array(
419 'label' => __( 'Bottom Left' ),
420 'icon' => 'dashicons dashicons-arrow-left-alt',
421 ),
422 'center bottom' => array(
423 'label' => __( 'Bottom' ),
424 'icon' => 'dashicons dashicons-arrow-down-alt',
425 ),
426 'right bottom' => array(
427 'label' => __( 'Bottom Right' ),
428 'icon' => 'dashicons dashicons-arrow-right-alt',
429 ),
430 ),
431 );
432 ?>
433<tr>
434<th scope="row"><?php echo $background_position_title; ?></th>
435<td><fieldset><legend class="screen-reader-text"><span><?php echo $background_position_title; ?></span></legend>
436<div class="background-position-control">
437 <?php foreach ( $background_position_options as $group ) : ?>
438 <div class="button-group">
439 <?php foreach ( $group as $value => $input ) : ?>
440 <label>
441 <input class="ui-helper-hidden-accessible" name="background-position" type="radio" value="<?php echo esc_attr( $value ); ?>"<?php checked( $value, $background_position ); ?>>
442 <span class="button display-options position"><span class="<?php echo esc_attr( $input['icon'] ); ?>" aria-hidden="true"></span></span>
443 <span class="screen-reader-text"><?php echo $input['label']; ?></span>
444 </label>
445 <?php endforeach; ?>
446 </div>
447<?php endforeach; ?>
448</div>
449</fieldset></td>
450</tr>
451
452 <?php $image_size_title = __( 'Image Size' ); ?>
453<tr>
454<th scope="row"><label for="background-size"><?php echo $image_size_title; ?></label></th>
455<td><fieldset><legend class="screen-reader-text"><span><?php echo $image_size_title; ?></span></legend>
456<select id="background-size" name="background-size">
457<option value="auto"<?php selected( 'auto', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _ex( 'Original', 'Original Size' ); ?></option>
458<option value="contain"<?php selected( 'contain', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fit to Screen' ); ?></option>
459<option value="cover"<?php selected( 'cover', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fill Screen' ); ?></option>
460</select>
461</fieldset></td>
462</tr>
463
464 <?php $background_repeat_title = _x( 'Repeat', 'Background Repeat' ); ?>
465<tr>
466<th scope="row"><?php echo $background_repeat_title; ?></th>
467<td><fieldset><legend class="screen-reader-text"><span><?php echo $background_repeat_title; ?></span></legend>
468<input name="background-repeat" type="hidden" value="no-repeat">
469<label><input type="checkbox" name="background-repeat" value="repeat"<?php checked( 'repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?>> <?php _e( 'Repeat Background Image' ); ?></label>
470</fieldset></td>
471</tr>
472
473 <?php $background_scroll_title = _x( 'Scroll', 'Background Scroll' ); ?>
474<tr>
475<th scope="row"><?php echo $background_scroll_title; ?></th>
476<td><fieldset><legend class="screen-reader-text"><span><?php echo $background_scroll_title; ?></span></legend>
477<input name="background-attachment" type="hidden" value="fixed">
478<label><input name="background-attachment" type="checkbox" value="scroll" <?php checked( 'scroll', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?>> <?php _e( 'Scroll with Page' ); ?></label>
479</fieldset></td>
480</tr>
481<?php endif; // get_background_image() ?>
482
483 <?php $background_color_title = __( 'Background Color' ); ?>
484<tr>
485<th scope="row"><?php echo $background_color_title; ?></th>
486<td><fieldset><legend class="screen-reader-text"><span><?php echo $background_color_title; ?></span></legend>
487 <?php
488 $default_color = '';
489 if ( current_theme_supports( 'custom-background', 'default-color' ) ) {
490 $default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"';
491 }
492 ?>
493<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color; ?>>
494</fieldset></td>
495</tr>
496</tbody>
497</table>
498
499 <?php wp_nonce_field( 'custom-background' ); ?>
500 <?php submit_button( null, 'primary', 'save-background-options' ); ?>
501</form>
502
503</div>
504 <?php
505 }
506
507 /**
508 * Handles an Image upload for the background image.
509 *
510 * @since 3.0.0
511 */
512 public function handle_upload() {
513 if ( empty( $_FILES ) ) {
514 return;
515 }
516
517 check_admin_referer( 'custom-background-upload', '_wpnonce-custom-background-upload' );
518
519 $overrides = array( 'test_form' => false );
520
521 $uploaded_file = $_FILES['import'];
522 $wp_filetype = wp_check_filetype_and_ext( $uploaded_file['tmp_name'], $uploaded_file['name'] );
523 if ( ! wp_match_mime_types( 'image', $wp_filetype['type'] ) ) {
524 wp_die( __( 'The uploaded file is not a valid image. Please try again.' ) );
525 }
526
527 $file = wp_handle_upload( $uploaded_file, $overrides );
528
529 if ( isset( $file['error'] ) ) {
530 wp_die( $file['error'] );
531 }
532
533 $url = $file['url'];
534 $type = $file['type'];
535 $file = $file['file'];
536 $filename = wp_basename( $file );
537
538 // Construct the attachment array.
539 $attachment = array(
540 'post_title' => $filename,
541 'post_content' => $url,
542 'post_mime_type' => $type,
543 'guid' => $url,
544 'context' => 'custom-background',
545 );
546
547 // Save the data.
548 $id = wp_insert_attachment( $attachment, $file );
549
550 // Add the metadata.
551 wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) );
552 update_post_meta( $id, '_wp_attachment_is_custom_background', get_option( 'stylesheet' ) );
553
554 set_theme_mod( 'background_image', sanitize_url( $url ) );
555
556 $thumbnail = wp_get_attachment_image_src( $id, 'thumbnail' );
557 set_theme_mod( 'background_image_thumb', sanitize_url( $thumbnail[0] ) );
558
559 /** This filter is documented in wp-admin/includes/class-custom-image-header.php */
560 $file = apply_filters( 'wp_create_file_in_uploads', $file, $id ); // For replication.
561
562 $this->updated = true;
563 }
564
565 /**
566 * Handles Ajax request for adding custom background context to an attachment.
567 *
568 * Triggers when the user adds a new background image from the
569 * Media Manager.
570 *
571 * @since 4.1.0
572 */
573 public function ajax_background_add() {
574 check_ajax_referer( 'background-add', 'nonce' );
575
576 if ( ! current_user_can( 'edit_theme_options' ) ) {
577 wp_send_json_error();
578 }
579
580 $attachment_id = absint( $_POST['attachment_id'] );
581 if ( $attachment_id < 1 ) {
582 wp_send_json_error();
583 }
584
585 update_post_meta( $attachment_id, '_wp_attachment_is_custom_background', get_stylesheet() );
586
587 wp_send_json_success();
588 }
589
590 /**
591 * @since 3.4.0
592 * @deprecated 3.5.0
593 *
594 * @param array $form_fields
595 * @return array $form_fields
596 */
597 public function attachment_fields_to_edit( $form_fields ) {
598 return $form_fields;
599 }
600
601 /**
602 * @since 3.4.0
603 * @deprecated 3.5.0
604 *
605 * @param array $tabs
606 * @return array $tabs
607 */
608 public function filter_upload_tabs( $tabs ) {
609 return $tabs;
610 }
611
612 /**
613 * @since 3.4.0
614 * @deprecated 3.5.0
615 */
616 public function wp_set_background_image() {
617 check_ajax_referer( 'custom-background' );
618
619 if ( ! current_user_can( 'edit_theme_options' ) || ! isset( $_POST['attachment_id'] ) ) {
620 exit;
621 }
622
623 $attachment_id = absint( $_POST['attachment_id'] );
624
625 $sizes = array_keys(
626 /** This filter is documented in wp-admin/includes/media.php */
627 apply_filters(
628 'image_size_names_choose',
629 array(
630 'thumbnail' => __( 'Thumbnail' ),
631 'medium' => __( 'Medium' ),
632 'large' => __( 'Large' ),
633 'full' => __( 'Full Size' ),
634 )
635 )
636 );
637
638 $size = 'thumbnail';
639 if ( in_array( $_POST['size'], $sizes, true ) ) {
640 $size = esc_attr( $_POST['size'] );
641 }
642
643 update_post_meta( $attachment_id, '_wp_attachment_is_custom_background', get_option( 'stylesheet' ) );
644
645 $url = wp_get_attachment_image_src( $attachment_id, $size );
646 $thumbnail = wp_get_attachment_image_src( $attachment_id, 'thumbnail' );
647 set_theme_mod( 'background_image', sanitize_url( $url[0] ) );
648 set_theme_mod( 'background_image_thumb', sanitize_url( $thumbnail[0] ) );
649 exit;
650 }
651}
652