first commit

wp-content/themes/storefront/inc/customizer/class-storefront-customizer-control-arbitrary.php

@@ -0,0 +1,52 @@
+<?php // @codingStandardsIgnoreLine.
+/**
+ * Class to create a custom arbitrary html control for dividers etc
+ *
+ * @package  storefront
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * The arbitrary control class
+ */
+class Arbitrary_Storefront_Control extends WP_Customize_Control {
+
+	/**
+	 * The settings var
+	 *
+	 * @var string $settings the blog name.
+	 */
+	public $settings = 'blogname';
+
+	/**
+	 * The description var
+	 *
+	 * @var string $description the control description.
+	 */
+	public $description = '';
+
+	/**
+	 * Renter the control
+	 *
+	 * @return void
+	 */
+	public function render_content() {
+		switch ( $this->type ) {
+			default:
+			case 'text':
+				echo '<p class="description">' . wp_kses_post( $this->description ) . '</p>';
+				break;
+
+			case 'heading':
+				echo '<span class="customize-control-title">' . esc_html( $this->label ) . '</span>';
+				break;
+
+			case 'divider':
+				echo '<hr style="margin: 1em 0;" />';
+				break;
+		}
+	}
+}

wp-content/themes/storefront/inc/customizer/class-storefront-customizer-control-more.php

@@ -0,0 +1,50 @@
+<?php // @codingStandardsIgnoreLine.
+/**
+ * Class to create a Customizer control for displaying information
+ *
+ * @package  storefront
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * The 'more' Storefront control class
+ */
+class More_Storefront_Control extends WP_Customize_Control {
+
+	/**
+	 * Render the content on the theme customizer page
+	 */
+	public function render_content() {
+		?>
+		<label style="overflow: hidden; zoom: 1;">
+
+			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+
+			<p>
+				<?php
+					/* translators: 1: Storefront, 2: start <a> tag, 3: Storefront, 4: end <a> tag */
+					printf( esc_html__( 'There\'s a range of %1$s extensions available to put additional power in your hands. Check out the %2$s%3$s%4$s page in your dashboard for more information.', 'storefront' ), 'Storefront', '<a href="' . esc_url( admin_url() . 'themes.php?page=storefront-welcome' ) . '">', 'Storefront', '</a>' );
+				?>
+			</p>
+
+			<span class="customize-control-title">
+				<?php
+					/* translators: %s: Storefront */
+					printf( esc_html__( 'Enjoying %s?', 'storefront' ), 'Storefront' );
+				?>
+			</span>
+
+			<p>
+				<?php
+					/* translators: 1: start <a> tag, 2: end <a> tag */
+					printf( esc_html__( 'Why not leave us a review on %1$sWordPress.org%2$s?  We\'d really appreciate it!', 'storefront' ), '<a href="https://wordpress.org/themes/storefront">', '</a>' );
+				?>
+			</p>
+
+		</label>
+		<?php
+	}
+}

wp-content/themes/storefront/inc/customizer/class-storefront-customizer-control-radio-image.php

@@ -0,0 +1,80 @@
+<?php // @codingStandardsIgnoreLine.
+/**
+ * Create a Radio-Image control
+ *
+ * This class incorporates code from the Kirki Customizer Framework and from a tutorial
+ * written by Otto Wood.
+ *
+ * The Kirki Customizer Framework, Copyright Aristeides Stathopoulos (@aristath),
+ * is licensed under the terms of the GNU GPL, Version 2 (or later).
+ *
+ * @link https://github.com/reduxframework/kirki/
+ * @link http://ottopress.com/2012/making-a-custom-control-for-the-theme-customizer/
+ * @package  storefront
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * The radio image class.
+ */
+class Storefront_Custom_Radio_Image_Control extends WP_Customize_Control {
+
+	/**
+	 * Declare the control type.
+	 *
+	 * @var string
+	 */
+	public $type = 'radio-image';
+
+	/**
+	 * Enqueue scripts and styles for the custom control.
+	 *
+	 * Scripts are hooked at {@see 'customize_controls_enqueue_scripts'}.
+	 *
+	 * Note, you can also enqueue stylesheets here as well. Stylesheets are hooked
+	 * at 'customize_controls_print_styles'.
+	 */
+	public function enqueue() {
+		wp_enqueue_script( 'jquery-ui-button' );
+	}
+
+	/**
+	 * Render the control to be displayed in the Customizer.
+	 */
+	public function render_content() {
+		if ( empty( $this->choices ) ) {
+			return;
+		}
+
+		$name = '_customize-radio-' . $this->id; ?>
+
+		<span class="customize-control-title">
+			<?php echo esc_attr( $this->label ); ?>
+		</span>
+
+		<?php if ( ! empty( $this->description ) ) : ?>
+			<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
+		<?php endif; ?>
+
+		<div id="input_<?php echo esc_attr( $this->id ); ?>" class="image">
+			<?php foreach ( $this->choices as $value => $label ) : ?>
+				<input class="image-select" type="radio" value="<?php echo esc_attr( $value ); ?>" id="<?php echo esc_attr( $this->id . $value ); ?>" name="<?php echo esc_attr( $name ); ?>"
+					<?php
+					$this->link();
+					checked( $this->value(), $value );
+					?>
+				>
+					<label for="<?php echo esc_attr( $this->id ) . esc_attr( $value ); ?>">
+						<img src="<?php echo esc_html( $label ); ?>" alt="<?php echo esc_attr( $value ); ?>" title="<?php echo esc_attr( $value ); ?>">
+					</label>
+				</input>
+			<?php endforeach; ?>
+		</div>
+
+		<script>jQuery(document).ready(function($) { $( '[id="input_<?php echo esc_attr( $this->id ); ?>"]' ).buttonset(); });</script>
+		<?php
+	}
+}