WP_Customize_Background_Position_Control WordPress Class

The WP_Customize_Background_Position_Control class allows you to position a background image in your WordPress customizer. You can set the image to be displayed in the top left, top right, bottom left, or bottom right of the page.

WP_Customize_Background_Position_Control #

Customize Background Position Control class.


Description

Top ↑

See also


Top ↑

Source

File: wp-includes/customize/class-wp-customize-background-position-control.php

class WP_Customize_Background_Position_Control extends WP_Customize_Control {

	/**
	 * Type.
	 *
	 * @since 4.7.0
	 * @var string
	 */
	public $type = 'background_position';

	/**
	 * Don't render the control content from PHP, as it's rendered via JS on load.
	 *
	 * @since 4.7.0
	 */
	public function render_content() {}

	/**
	 * Render a JS template for the content of the position control.
	 *
	 * @since 4.7.0
	 */
	public function content_template() {
		$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',
				),
			),
		);
		?>
		<# if ( data.label ) { #>
			<span class="customize-control-title">{{{ data.label }}}</span>
		<# } #>
		<# if ( data.description ) { #>
			<span class="description customize-control-description">{{{ data.description }}}</span>
		<# } #>
		<div class="customize-control-content">
			<fieldset>
				<legend class="screen-reader-text"><span><?php _e( 'Image Position' ); ?></span></legend>
				<div class="background-position-control">
				<?php foreach ( $options as $group ) : ?>
					<div class="button-group">
					<?php foreach ( $group as $value => $input ) : ?>
						<label>
							<input class="ui-helper-hidden-accessible" name="background-position" type="radio" value="<?php echo esc_attr( $value ); ?>">
							<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>
		</div>
		<?php
	}
}


Top ↑

Methods

  • content_template— Render a JS template for the content of the position control.
  • render_content— Don't render the control content from PHP, as it's rendered via JS on load.

Top ↑

Changelog

Changelog
VersionDescription
4.7.0Introduced.

The content displayed on this page has been created in part by processing WordPress source code files which are made available under the GPLv2 (or a later version) license by theĀ Free Software Foundation. In addition to this, the content includes user-written examples and information. All material is subject to review and curation by the WPPaste.com community.