/**
* Callback for administration header.
*
- * @var callback
+ * @var callable
* @since 3.0.0
- * @access private
*/
- var $admin_header_callback;
+ public $admin_header_callback;
/**
* Callback for header div.
*
- * @var callback
+ * @var callable
* @since 3.0.0
- * @access private
*/
- var $admin_image_div_callback;
+ public $admin_image_div_callback;
/**
- * Holds the page menu hook.
+ * Used to trigger a success message when settings updated and set to true.
*
- * @var string
* @since 3.0.0
* @access private
+ * @var bool
*/
- var $page = '';
+ private $updated;
/**
* Constructor - Register administration header callback.
*
* @since 3.0.0
- * @param callback $admin_header_callback
- * @param callback $admin_image_div_callback Optional custom image div output callback.
- * @return Custom_Background
+ * @param callable $admin_header_callback
+ * @param callable $admin_image_div_callback Optional custom image div output callback.
*/
- function __construct($admin_header_callback = '', $admin_image_div_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( 'wp_ajax_custom-background-add', array( $this, 'ajax_background_add' ) );
+
+ // Unused since 3.5.0.
add_action( 'wp_ajax_set-background-image', array( $this, 'wp_set_background_image' ) );
}
*
* @since 3.0.0
*/
- function init() {
- if ( ! current_user_can('edit_theme_options') )
+ public function init() {
+ $page = add_theme_page( __( 'Background' ), __( 'Background' ), 'edit_theme_options', 'custom-background', array( $this, 'admin_page' ) );
+ if ( ! $page ) {
return;
+ }
- $this->page = $page = add_theme_page(__('Background'), __('Background'), 'edit_theme_options', 'custom-background', array($this, 'admin_page'));
-
- add_action("load-$page", array($this, 'admin_load'));
- add_action("load-$page", array($this, 'take_action'), 49);
- add_action("load-$page", array($this, 'handle_upload'), 49);
+ add_action( "load-$page", array( $this, 'admin_load' ) );
+ add_action( "load-$page", array( $this, 'take_action' ), 49 );
+ add_action( "load-$page", array( $this, 'handle_upload' ), 49 );
- if ( $this->admin_header_callback )
- add_action("admin_head-$page", $this->admin_header_callback, 51);
+ if ( $this->admin_header_callback ) {
+ add_action( "admin_head-$page", $this->admin_header_callback, 51 );
+ }
}
/**
*
* @since 3.0.0
*/
- function admin_load() {
+ public function admin_load() {
get_current_screen()->add_help_tab( array(
'id' => 'overview',
'title' => __('Overview'),
get_current_screen()->set_help_sidebar(
'<p><strong>' . __( 'For more information:' ) . '</strong></p>' .
- '<p>' . __( '<a href="http://codex.wordpress.org/Appearance_Background_Screen" target="_blank">Documentation on Custom Background</a>' ) . '</p>' .
- '<p>' . __( '<a href="https://wordpress.org/support/" target="_blank">Support Forums</a>' ) . '</p>'
+ '<p>' . __( '<a href="https://codex.wordpress.org/Appearance_Background_Screen">Documentation on Custom Background</a>' ) . '</p>' .
+ '<p>' . __( '<a href="https://wordpress.org/support/">Support Forums</a>' ) . '</p>'
);
wp_enqueue_media();
*
* @since 3.0.0
*/
- function take_action() {
-
+ public function take_action() {
if ( empty($_POST) )
return;
return;
}
- if ( isset($_POST['background-repeat']) ) {
- check_admin_referer('custom-background');
- if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) )
- $repeat = $_POST['background-repeat'];
- else
- $repeat = 'repeat';
- set_theme_mod('background_repeat', $repeat);
+ if ( isset( $_POST['background-preset'] ) ) {
+ check_admin_referer( 'custom-background' );
+
+ if ( in_array( $_POST['background-preset'], array( 'default', 'fill', 'fit', 'repeat', 'custom' ), true ) ) {
+ $preset = $_POST['background-preset'];
+ } else {
+ $preset = 'default';
+ }
+
+ set_theme_mod( 'background_preset', $preset );
}
- if ( isset($_POST['background-position-x']) ) {
- check_admin_referer('custom-background');
- if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) )
- $position = $_POST['background-position-x'];
- else
- $position = 'left';
- set_theme_mod('background_position_x', $position);
+ if ( isset( $_POST['background-position'] ) ) {
+ check_admin_referer( 'custom-background' );
+
+ $position = explode( ' ', $_POST['background-position'] );
+
+ if ( in_array( $position[0], array( 'left', 'center', 'right' ), true ) ) {
+ $position_x = $position[0];
+ } else {
+ $position_x = 'left';
+ }
+
+ if ( in_array( $position[1], array( 'top', 'center', 'bottom' ), true ) ) {
+ $position_y = $position[1];
+ } else {
+ $position_y = 'top';
+ }
+
+ set_theme_mod( 'background_position_x', $position_x );
+ set_theme_mod( 'background_position_y', $position_y );
}
- if ( isset($_POST['background-attachment']) ) {
- check_admin_referer('custom-background');
- if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) )
- $attachment = $_POST['background-attachment'];
- else
- $attachment = 'fixed';
- set_theme_mod('background_attachment', $attachment);
+ if ( isset( $_POST['background-size'] ) ) {
+ check_admin_referer( 'custom-background' );
+
+ if ( in_array( $_POST['background-size'], array( 'auto', 'contain', 'cover' ), true ) ) {
+ $size = $_POST['background-size'];
+ } else {
+ $size = 'auto';
+ }
+
+ set_theme_mod( 'background_size', $size );
+ }
+
+ if ( isset( $_POST['background-repeat'] ) ) {
+ check_admin_referer( 'custom-background' );
+
+ $repeat = $_POST['background-repeat'];
+
+ if ( 'no-repeat' !== $repeat ) {
+ $repeat = 'repeat';
+ }
+
+ set_theme_mod( 'background_repeat', $repeat );
+ }
+
+ if ( isset( $_POST['background-attachment'] ) ) {
+ check_admin_referer( 'custom-background' );
+
+ $attachment = $_POST['background-attachment'];
+
+ if ( 'fixed' !== $attachment ) {
+ $attachment = 'scroll';
+ }
+
+ set_theme_mod( 'background_attachment', $attachment );
}
if ( isset($_POST['background-color']) ) {
*
* @since 3.0.0
*/
- function admin_page() {
+ public function admin_page() {
?>
<div class="wrap" id="custom-background">
-<h2><?php _e( 'Custom Background' ); ?></h2>
+<h1><?php _e( 'Custom Background' ); ?></h1>
+
+<?php if ( current_user_can( 'customize' ) ) { ?>
+<div class="notice notice-info hide-if-no-customize">
+ <p>
+ <?php
+ printf(
+ __( 'You can now manage and live-preview Custom Backgrounds in the <a href="%1$s">Customizer</a>.' ),
+ admin_url( 'customize.php?autofocus[control]=background_image' )
+ );
+ ?>
+ </p>
+</div>
+<?php } ?>
<?php if ( ! empty( $this->updated ) ) { ?>
<div id="message" class="updated">
if ( $bgcolor = get_background_color() )
$background_styles .= 'background-color: #' . $bgcolor . ';';
- if ( get_background_image() ) {
- $background_image_thumb = esc_url( set_url_scheme( get_theme_mod( 'background_image_thumb', str_replace( '%', '%%', get_background_image() ) ) ) );
- // background-image URL must be single quote, see below
- $background_styles .= ' background-image: url(\'' . $background_image_thumb . '\');'
- . ' background-repeat: ' . get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) . ';'
- . ' background-position: top ' . get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
+ $background_image_thumb = get_background_image();
+ if ( $background_image_thumb ) {
+ $background_image_thumb = esc_url( set_url_scheme( get_theme_mod( 'background_image_thumb', str_replace( '%', '%%', $background_image_thumb ) ) ) );
+ $background_position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
+ $background_position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) );
+ $background_size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) );
+ $background_repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
+ $background_attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
+
+ // Background-image URL must be single quote, see below.
+ $background_styles .= " background-image: url('$background_image_thumb');"
+ . " background-size: $background_size;"
+ . " background-position: $background_position_x $background_position_y;"
+ . " background-repeat: $background_repeat;"
+ . " background-attachment: $background_attachment;";
}
?>
<div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
- <?php if ( get_background_image() ) { ?>
+ <?php if ( $background_image_thumb ) { ?>
<img class="custom-background-image" src="<?php echo $background_image_thumb; ?>" style="visibility:hidden;" alt="" /><br />
<img class="custom-background-image" src="<?php echo $background_image_thumb; ?>" style="visibility:hidden;" alt="" />
<?php } ?>
<tr>
<th scope="row"><?php _e('Remove Image'); ?></th>
<td>
-<form method="post" action="">
+<form method="post">
<?php wp_nonce_field('custom-background-remove', '_wpnonce-custom-background-remove'); ?>
-<?php submit_button( __( 'Remove Background Image' ), 'button', 'remove-background', false ); ?><br/>
+<?php submit_button( __( 'Remove Background Image' ), '', 'remove-background', false ); ?><br/>
<?php _e('This will remove the background image. You will not be able to restore any customizations.') ?>
</form>
</td>
<tr>
<th scope="row"><?php _e('Restore Original Image'); ?></th>
<td>
-<form method="post" action="">
+<form method="post">
<?php wp_nonce_field('custom-background-reset', '_wpnonce-custom-background-reset'); ?>
-<?php submit_button( __( 'Restore Original Image' ), 'button', 'reset-background', false ); ?><br/>
+<?php submit_button( __( 'Restore Original Image' ), '', 'reset-background', false ); ?><br/>
<?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?>
</form>
</td>
</tr>
<?php endif; ?>
+<?php if ( current_user_can( 'upload_files' ) ): ?>
<tr>
<th scope="row"><?php _e('Select Image'); ?></th>
-<td><form enctype="multipart/form-data" id="upload-form" class="wp-upload-form" method="post" action="">
+<td><form enctype="multipart/form-data" id="upload-form" class="wp-upload-form" method="post">
<p>
<label for="upload"><?php _e( 'Choose an image from your computer:' ); ?></label><br />
<input type="file" id="upload" name="import" />
<input type="hidden" name="action" value="save" />
<?php wp_nonce_field( 'custom-background-upload', '_wpnonce-custom-background-upload' ); ?>
- <?php submit_button( __( 'Upload' ), 'button', 'submit', false ); ?>
+ <?php submit_button( __( 'Upload' ), '', 'submit', false ); ?>
</p>
<p>
<label for="choose-from-library-link"><?php _e( 'Or choose an image from your media library:' ); ?></label><br />
- <a id="choose-from-library-link" class="button"
+ <button id="choose-from-library-link" class="button"
data-choose="<?php esc_attr_e( 'Choose a Background Image' ); ?>"
- data-update="<?php esc_attr_e( 'Set as background' ); ?>"><?php _e( 'Choose Image' ); ?></a>
+ data-update="<?php esc_attr_e( 'Set as background' ); ?>"><?php _e( 'Choose Image' ); ?></button>
</p>
</form>
</td>
</tr>
+<?php endif; ?>
</tbody>
</table>
-<h3><?php _e('Display Options') ?></h3>
-<form method="post" action="">
+<h3><?php _e( 'Display Options' ); ?></h3>
+<form method="post">
<table class="form-table">
<tbody>
<?php if ( get_background_image() ) : ?>
+<input name="background-preset" type="hidden" value="custom">
+
+<?php
+$background_position = sprintf(
+ '%s %s',
+ get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ),
+ get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) )
+);
+
+$background_position_options = array(
+ array(
+ 'left top' => array( 'label' => __( 'Top Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
+ 'center top' => array( 'label' => __( 'Top' ), 'icon' => 'dashicons dashicons-arrow-up-alt' ),
+ 'right top' => array( 'label' => __( 'Top Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
+ ),
+ array(
+ 'left center' => array( 'label' => __( 'Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
+ 'center center' => array( 'label' => __( 'Center' ), 'icon' => 'background-position-center-icon' ),
+ 'right center' => array( 'label' => __( 'Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
+ ),
+ array(
+ 'left bottom' => array( 'label' => __( 'Bottom Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
+ 'center bottom' => array( 'label' => __( 'Bottom' ), 'icon' => 'dashicons dashicons-arrow-down-alt' ),
+ 'right bottom' => array( 'label' => __( 'Bottom Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
+ ),
+);
+?>
<tr>
-<th scope="row"><?php _e( 'Position' ); ?></th>
-<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
-<label>
-<input name="background-position-x" type="radio" value="left"<?php checked( 'left', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
-<?php _e('Left') ?>
-</label>
-<label>
-<input name="background-position-x" type="radio" value="center"<?php checked( 'center', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
-<?php _e('Center') ?>
-</label>
-<label>
-<input name="background-position-x" type="radio" value="right"<?php checked( 'right', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
-<?php _e('Right') ?>
-</label>
+<th scope="row"><?php _e( 'Image Position' ); ?></th>
+<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Position' ); ?></span></legend>
+<div class="background-position-control">
+<?php foreach ( $background_position_options as $group ) : ?>
+ <div class="button-group">
+ <?php foreach ( $group as $value => $input ) : ?>
+ <label>
+ <input class="screen-reader-text" name="background-position" type="radio" value="<?php echo esc_attr( $value ); ?>"<?php checked( $value, $background_position ); ?>>
+ <span class="button display-options position"><span class="<?php echo esc_attr( $input['icon'] ); ?>" aria-hidden="true"></span></span>
+ <span class="screen-reader-text"><?php echo $input['label']; ?></span>
+ </label>
+ <?php endforeach; ?>
+ </div>
+<?php endforeach; ?>
+</div>
+</fieldset></td>
+</tr>
+
+<tr>
+<th scope="row"><label for="background-size"><?php _e( 'Image Size' ); ?></label></th>
+<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Size' ); ?></span></legend>
+<select id="background-size" name="background-size">
+<option value="auto"<?php selected( 'auto', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _ex( 'Original', 'Original Size' ); ?></option>
+<option value="contain"<?php selected( 'contain', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fit to Screen' ); ?></option>
+<option value="cover"<?php selected( 'cover', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fill Screen' ); ?></option>
+</select>
</fieldset></td>
</tr>
<tr>
-<th scope="row"><?php _e( 'Repeat' ); ?></th>
-<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend>
-<label><input type="radio" name="background-repeat" value="no-repeat"<?php checked( 'no-repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('No Repeat'); ?></label>
- <label><input type="radio" name="background-repeat" value="repeat"<?php checked( 'repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile'); ?></label>
- <label><input type="radio" name="background-repeat" value="repeat-x"<?php checked( 'repeat-x', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile Horizontally'); ?></label>
- <label><input type="radio" name="background-repeat" value="repeat-y"<?php checked( 'repeat-y', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile Vertically'); ?></label>
+<th scope="row"><?php _ex( 'Repeat', 'Background Repeat' ); ?></th>
+<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Repeat', 'Background Repeat' ); ?></span></legend>
+<input name="background-repeat" type="hidden" value="no-repeat">
+<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>
</fieldset></td>
</tr>
<tr>
-<th scope="row"><?php _ex( 'Attachment', 'Background Attachment' ); ?></th>
-<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Attachment' ); ?></span></legend>
-<label>
-<input name="background-attachment" type="radio" value="scroll" <?php checked( 'scroll', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?> />
-<?php _e( 'Scroll' ); ?>
-</label>
-<label>
-<input name="background-attachment" type="radio" value="fixed" <?php checked( 'fixed', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?> />
-<?php _e( 'Fixed' ); ?>
-</label>
+<th scope="row"><?php _ex( 'Scroll', 'Background Scroll' ); ?></th>
+<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Scroll', 'Background Scroll' ); ?></span></legend>
+<input name="background-attachment" type="hidden" value="fixed">
+<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>
</fieldset></td>
</tr>
<?php endif; // get_background_image() ?>
if ( current_theme_supports( 'custom-background', 'default-color' ) )
$default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"';
?>
-<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?> />
+<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?>>
</fieldset></td>
</tr>
</tbody>
*
* @since 3.0.0
*/
- function handle_upload() {
-
+ public function handle_upload() {
if ( empty($_FILES) )
return;
$overrides = array('test_form' => false);
$uploaded_file = $_FILES['import'];
- $wp_filetype = wp_check_filetype_and_ext( $uploaded_file['tmp_name'], $uploaded_file['name'], false );
+ $wp_filetype = wp_check_filetype_and_ext( $uploaded_file['tmp_name'], $uploaded_file['name'] );
if ( ! wp_match_mime_types( 'image', $wp_filetype['type'] ) )
wp_die( __( 'The uploaded file is not a valid image. Please try again.' ) );
}
/**
- * Unused since 3.5.0.
+ * Ajax handler for adding custom background context to an attachment.
+ *
+ * Triggered when the user adds a new background image from the
+ * Media Manager.
+ *
+ * @since 4.1.0
+ */
+ public function ajax_background_add() {
+ check_ajax_referer( 'background-add', 'nonce' );
+
+ if ( ! current_user_can( 'edit_theme_options' ) ) {
+ wp_send_json_error();
+ }
+
+ $attachment_id = absint( $_POST['attachment_id'] );
+ if ( $attachment_id < 1 ) {
+ wp_send_json_error();
+ }
+
+ update_post_meta( $attachment_id, '_wp_attachment_is_custom_background', get_stylesheet() );
+
+ wp_send_json_success();
+ }
+
+ /**
*
* @since 3.4.0
+ * @deprecated 3.5.0
+ *
+ * @param array $form_fields
+ * @return array $form_fields
*/
- function attachment_fields_to_edit( $form_fields ) {
+ public function attachment_fields_to_edit( $form_fields ) {
return $form_fields;
}
/**
- * Unused since 3.5.0.
*
* @since 3.4.0
+ * @deprecated 3.5.0
+ *
+ * @param array $tabs
+ * @return array $tabs
*/
- function filter_upload_tabs( $tabs ) {
+ public function filter_upload_tabs( $tabs ) {
return $tabs;
}
+ /**
+ *
+ * @since 3.4.0
+ * @deprecated 3.5.0
+ */
public function wp_set_background_image() {
if ( ! current_user_can('edit_theme_options') || ! isset( $_POST['attachment_id'] ) ) exit;
$attachment_id = absint($_POST['attachment_id']);