Skip to content

Instantly share code, notes, and snippets.

@shizhua
Last active July 16, 2021 09:11
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save shizhua/12fbfd10806c0bd91867dc6a61ea4278 to your computer and use it in GitHub Desktop.
Save shizhua/12fbfd10806c0bd91867dc6a61ea4278 to your computer and use it in GitHub Desktop.
Multiple checkbox customizer control
jQuery( document ).ready( function() {
/* === Checkbox Multiple Control === */
jQuery( '.customize-control-checkbox-multiple input[type="checkbox"]' ).on( 'change', function() {
checkbox_values = jQuery( this ).parents( '.customize-control' ).find( 'input[type="checkbox"]:checked' ).map(
function() {
return this.value;
}
).get().join( ',' );
jQuery( this ).parents( '.customize-control' ).find( 'input[type="hidden"]' ).val( checkbox_values ).trigger( 'change' );
}
);
} ); // jQuery( document ).ready
<?php
/**
* Sanitize the Multiple checkbox values.
*
* @param string $values Values.
* @return array Checked values.
*/
function sanitize_multiple_checkbox( $values ) {
$multi_values = ! is_array( $values ) ? explode( ',', $values ) : $values;
return !empty( $multi_values ) ? array_map( 'sanitize_text_field', $multi_values ) : array();
}
<?php
$wp_customize->add_setting( 'pfun_recaptcha_places', array(
'default' => array('register', 'submit', 'pass', 'reset'),
'sanitize_callback' => 'sanitize_multiple_checkbox',
'transport' => 'postMessage',
) );
$wp_customize->add_control( new PFUN_Customize_Control_Checkbox_Multiple( $wp_customize, 'pfun_recaptcha_places', array(
'label' => __( 'Form Security', 'pfun' ),
'description' => __( 'Select where you want to display Security Question/Answer for anti-spapm.', 'pfun' ),
'section' => 'pfun_general_section',
'choices' => array(
'login' => __( 'Login Form', 'pfun' ),
'register' => __( 'Registration Form', 'pfun' ),
'submit' => __( 'Post Submit Form', 'pfun' ),
'pass' => __( 'Change Password Form', 'pfun' ),
'reset' => __( 'Reset Password Form', 'pfun' ),
),
'priority' => 2,
) ) );
<?php
/**
* Multiple checkbox customize control class.
* URL: http://wpsites.org/multiple-checkbox-customizer-control-10868/
*
*/
class PFUN_Customize_Control_Checkbox_Multiple extends WP_Customize_Control {
/**
* The type of customize control being rendered.
*
* @since 1.0.0
* @access public
* @var string
*/
public $type = 'checkbox-multiple';
/**
* Enqueue scripts/styles.
*
* @since 1.0.0
* @access public
* @return void
*/
public function enqueue() {
wp_enqueue_script( 'pfun-customize-controls', trailingslashit( get_template_directory_uri() ) . 'js/customize-controls.js', array( 'jquery' ), null, true );
}
/**
* Displays the control content.
*
* @since 1.0.0
* @access public
* @return void
*/
public function render_content() {
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; ?>
<?php $multi_values = !is_array( $this->value() ) ? explode( ',', $this->value() ) : $this->value(); ?>
<ul>
<?php foreach ( $this->choices as $value => $label ) : ?>
<li>
<label>
<input type="checkbox" value="<?php echo esc_attr( $value ); ?>" <?php checked( in_array( $value, $multi_values ) ); ?> />
<?php echo esc_html( $label ); ?>
</label>
</li>
<?php endforeach; ?>
</ul>
<input type="hidden" <?php $this->link(); ?> value="<?php echo esc_attr( implode( ',', $multi_values ) ); ?>" />
<?php }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment