DraggableSortableCheckboxesfortheWordPressCustomizer.php

DraggableSortableCheckboxesfortheWordPressCustomizer.php

class LXB_AF_Checkbox extends WP_Customize_Control {
	
	// I'm not sure where this gets used but it's in the codex.
	public $type = 'checkbox_group';
	
	/**
	 * This method must be named, exactly, 'render_content', as that's
	 * expected by the WP core cusotmization class, which it extends.  It
	 * outputs the HTML for our custom input.
	 * 
	 * In this case, all it does is output a hidden input with some
	 * important data attributes.  Our JS reads the data attributes and
	 * creates the markup. The reason for this is because the customizer 
	 * only updates via JS, so we might as well create it via JS, since the 
	 * logic for creating and updating is very similar.
	 */
	public function render_content() {

		$out = '';

		$class = LXB_AF . '-checkbox_group-hidden';
		$class = " class='$class' ";
		$id    = esc_attr( $this -> id );
		$name  = " name='$id' ";
		$label = esc_html( $this -> label );

		$value = '';
		if( isset( $this -> value ) ) {
			$value = $this -> value;
		}

		// WP uses this to create the value of the input.
		$link = 'data-customize-setting-link="' . $id . '"';

		/**
		 * Store the choices for this setting in a data attr. In our JS,
		 * we'll use these to make the checkboxes.
		 */
		$choices      = $this -> choices;
		$choices_data = esc_attr( json_encode( $choices ) );
		$choices_data = " data-choices='$choices_data' ";

		// The type of input.  Text for debugging purposes.  Switch to hidden for production.
		$type = " 'type='text' ";

		$out .= "<span class='customize-control-title'>$label</span>";
		$out .= "<input $choices_data $link $type $name $class>";
	 
		echo $out;

	}

}