Fixes code wrap for dropdown pages example

README.md

@@ -29,12 +29,14 @@ The Customizer Library currently supports these options:
 * Checkbox
 * Select
 * Radio
+* Radio Images
 * Upload
 * Image
 * Color
 * Text
 * URL
 * Range
+* Arbitrary Text
 * Textarea
 * Select (Typography)
 
@@ -146,6 +148,7 @@ $options['example-select'] = array(
 
 ### Drop Down Pages
 
+~~~php
 $options['example-dropdown-pages'] = array(
 	'id' => 'example-dropdown-pages',
 	'label'   => __( 'Example Drop Down Pages', 'textdomain' ),
@@ -174,6 +177,35 @@ $options['example-radio'] = array(
 );
 ~~~
 
+### Radio Images
+
+The radio images will need to be placed in the theme's images folder or adjut the image path accordingly.
+
+~~~php
+
+$imagepath =  get_template_directory_uri() . '/img/';
+
+$image_choices = array(
+	'choice-1'  => array( 
+		'url' => $imagepath .'example-1.png', 
+		'label' => 'Left'
+	),
+	'choice-2' => array( 
+		'url' => $imagepath .'example-2.png', 
+		'label' => 'Right'
+	),
+);
+
+$options['example-radio-images'] = array(
+    'id' 			=> 'example-radio-images',
+    'label'   		=> __( 'Example Radio Images', 'demo' ),
+    'section' 		=> $section,
+    'type'    		=> 'radio-image',
+    'choices' 		=> $image_choices,
+    'default' 		=> 'choice-2'
+);
+~~~
+
 ### Upload
 
 ~~~php
@@ -241,6 +273,20 @@ $options['example-range'] = array(
 );
 ~~~
 
+### Arbitary Text
+
+Adding arbitary text can be helpful for including additional instructions or notation for a control, panel, or section.
+
+~~~php
+$options['example-arbitrary-text'] = array(
+    'id' 			=> 'example-arbitrary-text',
+    'section'     	=> $section,
+    'label'         => __( 'Text Label', 'demo' ),
+    'type'          => 'helptext',
+    'description'	=> __( 'Example of more decription text', 'demo' )
+);
+~~~
+
 ### Pass $options to Customizer Library
 
 After all the options and sections are defined, load them with the Customizer Library:

custom-controls/help-text.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Custom control for arbitarty text, extend the WP customizer
+ */
+
+if ( ! class_exists( 'WP_Customize_Control' ) ) {
+    return NULL;
+}
+
+class Customizer_Library_Help_Text extends WP_Customize_Control {
+
+    /**
+     * Render the control's content.
+     */
+    public function render_content() {
+
+        echo '<span class="customize-control-title help-text-title">' . esc_html( $this->label ) . '</span>';
+        echo '<p class="description help-text-description">' . $this->description . '</p>';
+        echo '<hr />';
+
+    }
+
+}

custom-controls/radio-image.php

@@ -0,0 +1,80 @@
+<?php
+/**
+ * The radio image customize control extends the WP_Customize_Control class.  This class allows 
+ * developers to create a list of image radio inputs.
+ *
+ * Code graciously lifted from http://justintadlock.com
+ */
+
+if ( ! class_exists( 'WP_Customize_Control' ) ) {
+	return NULL;
+}
+
+
+class Customizer_Library_Control_Radio_Image extends WP_Customize_Control {
+
+	/**
+	 * The type of customize control being rendered.
+	 */
+	public $type = 'radio-image';
+
+	/**
+	 * Displays the control content.
+	 */
+	public function render_content() {
+
+		/* If no choices are provided, bail. */
+		if ( empty( $this->choices ) )
+			return; ?>
+
+		<?php if ( !empty( $this->label ) ) : ?>
+			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+		<?php endif; ?>
+
+		<?php if ( !empty( $this->description ) ) : ?>
+			<span class="description customize-control-description"><?php echo $this->description; ?></span>
+		<?php endif; ?>
+
+		<div id="<?php echo esc_attr( "input_{$this->id}" ); ?>">
+
+			<?php foreach ( $this->choices as $value => $args ) : ?>
+
+				<input type="radio" value="<?php echo esc_attr( $value ); ?>" name="<?php echo esc_attr( "_customize-radio-{$this->id}" ); ?>" id="<?php echo esc_attr( "{$this->id}-{$value}" ); ?>" <?php $this->link(); ?> <?php checked( $this->value(), $value ); ?> /> 
+
+				<label for="<?php echo esc_attr( "{$this->id}-{$value}" ); ?>">
+					<span class="screen-reader-text"><?php echo esc_html( $args['label'] ); ?></span>
+					<img src="<?php echo esc_url( sprintf( $args['url'], get_template_directory_uri(), get_stylesheet_directory_uri() ) ); ?>" alt="<?php echo esc_attr( $args['label'] ); ?>" />
+				</label>
+
+			<?php endforeach; ?>
+
+		</div><!-- .image -->
+
+		<script type="text/javascript">
+			jQuery( document ).ready( function() {
+				jQuery( '#<?php echo esc_attr( "input_{$this->id}" ); ?>' ).buttonset();
+			} );
+		</script>
+	<?php }
+
+	/**
+	 * Loads the jQuery UI Button script
+	 */
+	public function enqueue() {
+		wp_enqueue_script( 'jquery-ui-button' );
+
+		add_action( 'customize_controls_print_styles', array( $this, 'print_styles' ) );
+	}
+
+	/**
+	 * Outputs custom styles to give the selected image a visible border.
+	 */
+	public function print_styles() { ?>
+
+		<style type="text/css" id="hybrid-customize-radio-image-css">
+			.customize-control-radio-image img { border: 4px solid transparent; }
+			.customize-control-radio-image .ui-state-active img { border-color: #00a0d2; }
+		</style>
+	<?php }
+
+}

customizer-library.php

@@ -37,6 +37,8 @@
 	if ( version_compare( $GLOBALS['wp_version'], '4.0', '<' ) ) {
 		require plugin_dir_path( __FILE__ ) . 'custom-controls/textarea.php';
 	}
+	require plugin_dir_path( __FILE__ ) . 'custom-controls/help-text.php';
+	require plugin_dir_path( __FILE__ ) . 'custom-controls/radio-image.php';
 
 	/**
 	 * Class wrapper with useful methods for interacting with the theme customizer.

extensions/interface.php

@@ -155,6 +155,41 @@ function customizer_library_register( $wp_customize ) {
 
 						break;
 
+					case 'helptext':
+
+						$wp_customize->add_control(
+							new Customizer_Library_Help_Text(
+								$wp_customize,
+								$option['id'], array(
+									'label'             => $option['label'],
+									'section'           => $option['section'],
+									'priority'          => $option['priority'],
+									'description'       => $option['description'],
+									'sanitize_callback' => $option['sanitize_callback']
+								)
+							)
+						);
+
+						break;
+
+					case 'radio-image':
+
+						$wp_customize->add_control(
+							new Customizer_Library_Control_Radio_Image(
+								$wp_customize,
+								$option['id'], array(
+									'label'             => $option['label'],
+									'section'           => $option['section'],
+									'priority'          => $option['priority'],
+									'description'       => $option['description'],
+									'sanitize_callback' => $option['sanitize_callback'],
+									'choices'           => $option['choices']
+								)
+							)
+						);
+
+						break;
+
 				}
 			}
 		}
@@ -228,7 +263,8 @@ function customizer_library_add_setting( $option, $wp_customize ) {
 		'theme_supports'       => NULL,
 		'transport'            => NULL,
 		'sanitize_callback'    => 'wp_kses_post',
-		'sanitize_js_callback' => NULL
+		'sanitize_js_callback' => NULL,
+		'choices'			   => NULL
 	);
 
 	// Settings defaults
@@ -242,7 +278,8 @@ function customizer_library_add_setting( $option, $wp_customize ) {
 			'theme_supports'       => $settings['theme_supports'],
 			'transport'            => $settings['transport'],
 			'sanitize_callback'    => $settings['sanitize_callback'],
-			'sanitize_js_callback' => $settings['sanitize_js_callback']
+			'sanitize_js_callback' => $settings['sanitize_js_callback'],
+			'choices' 			   => $settings['choices']
 		)
 	);
 
@@ -259,7 +296,7 @@ function customizer_library_add_setting( $option, $wp_customize ) {
  */
 function customizer_library_get_sanitization( $type ) {
 
-	if ( 'select' == $type || 'radio' == $type ) {
+	if ( 'select' == $type || 'radio' == $type || 'radio-image' == $type ) {
 		return 'customizer_library_sanitize_choices';
 	}
 
@@ -275,7 +312,7 @@ function customizer_library_get_sanitization( $type ) {
 		return 'customizer_library_sanitize_file_url';
 	}
 
-	if ( 'text' == $type || 'textarea' == $type ) {
+	if ( 'text' == $type || 'textarea' == $type || 'helptext' == $type  ) {
 		return 'customizer_library_sanitize_text';
 	}