I realised I didn’t fully understand the link()
function; now I realise that it links the control to the proper setting, making it problematic trying to point multiple controls to one setting. I modified my original function to instead add a hidden input that will hold my final value, along with the checkboxes. I then enqueued a small javascript that checks for changes to the checkboxes, adds the value to my hidden input and triggers a click event so that the page gets updated:
class Customize_Pages_Control extends WP_Customize_Control {
public $type="pages";
public function enqueue() { // Enqueue script
wp_register_script( 'lma-page-selector', get_stylesheet_directory_uri() . '/library/js/libs/lma-page-selector.js', array(), '', false );
wp_enqueue_script( 'lma-page-selector' );
}
public function render_content() {
$pages = get_pages(); ?>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<input type="hidden" value="" <?php $this->link()?>/> <?php // Field to hold final values
foreach ($pages as $page) { // Loop through pages and add checkboxes
?>
<label>
<input type="checkbox" value="<?php echo $page->ID ?>">
<?php echo $page->post_title; ?>
</label> <?php
}
}
}
And the javascript:
jQuery(document).ready(function($) {
$('.customize-control-pages input[type="checkbox"]').change(function() {
var vals = $('.customize-control-pages input:checked').map(function() {
return $(this).val();
}).get().join(',');
$('.customize-control-pages input[type="text"]').val(vals).trigger('change');
});
});
It feels kludgy to me, but it seems to work. I’ll still need to add some sanitization there, but it’s a start. Hopefully someone might find it useful