Example WordPress Customizer Control mostly built with JavaScript API
;(function(api){
// wait for ready Event
api.bind('ready', function() {
// firt a Panel to house our sections
api.panel.add(new api.Panel('tzkmx_test_panel', {
title: 'Panel Tzkmx'
}))
// then a Section to house our controls
api.section.add(new api.Section('tzkmx_test_section', {
title: 'Section Tzkmx',
panel: 'tzkmx_test_panel',
customizeAction: 'Customizing Section Custom'
}))
// then a Control linked to the template output with
// `customize_controls_print_footer_scripts` action
api.control.add(new api.Control('tzkmx_test_control', {
title: 'Control Tzkmx',
settings: {
// the key links the value through attribute
// data-customize-setting-key-link="test"
test: 'tzkmx_test_setting'
// the value of this key is its identifier in the theme_mods
},
type: 'text-tzk',
section: 'tzkmx_test_section',
label: 'Check some text',
description: 'This goes here?',
// specify the templateId without the `tmpl-` prefix
templateId: 'text-tzk-control'
}))
// this should be the same key as the Control
api.add( new api.Setting('tzkmx_test_setting') )
})
}(wp.customize))
<?php
add_action( 'customize_controls_enqueue_scripts', 'tzkmx_customizer_controls_script' );
function tzkmx_customizer_controls_script() {
wp_enqueue_script( 'tzkmx-customize-controls', plugins_url( 'js/customize-controls.js', __DIR__ ) , [], null, true );
}
add_filter( 'customize_dynamic_setting_args', 'tzkmx_filter_dynamic_setting_args', 10, 2 );
function tzkmx_filter_dynamic_setting_args( $settings_args, $setting_id ) {
if ( 'tzkmx_test_control' === $setting_id ) {
$setting_args = [
'type' => 'theme_mod',
];
}
return $setting_args;
}
add_action( 'customize_controls_print_footer_scripts', function() {
?>
<script id="tmpl-text-tzk-control" type="text/html">
<# if ( data.label ) { #>
<span class="customize-control-title">{{ data.label }}</span>
<# } #>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<input type="text" value="" name="_customize-{{ data.type }}-{{ data.id }}" data-customize-setting-key-link="test" />
</script>
<?php
} );
To Florian Brinkmann for showing me the way to add the basic Elements to customizer:
To Weston Router for showing the way to link an underscore template to the Control:
TODO:
Studying the powerful API of Customizer SPA: