Finally, I found how to change the non-frame $button_labels
of a WP_Customize_Image_Control
by extending its class, not reassigning a new $type
and implement an enqueue()
function to enqueue a pure JavaScript code to manipulate the non-frame labels, like this to change the dynamic 'default'
label by .addEventListener("click", handler)
to its dynamic .button
:
class WP_Customize_Custom_Control extends WP_Customize_Image_Control {
public function enqueue() {
// There's no parent::enqueue() function.
?>
<script>
// Will execute if the specific element is ready, in pure JavaScript way.
var elemReadyCheckInterval = setInterval(function() {
if (document.getElementById("customize-control-custom")) {
clearInterval(elemReadyCheckInterval);
var controlCustom = document.getElementById("customize-control-custom");
var controlButton = controlCustom.getElementsByClassName("button")[0];
controlButton.addEventListener("click", function () {
buttonClick(controlCustom, controlButton);
});
}
}, 10);
function buttonClick(custom, button) {
var previousLabel = button.innerHTML;
var buttonClickFunc = arguments.callee;
var elemReadyCheckInterval = setInterval(function() {
// Remove the EventListener `buttonClick(custom, button)` from the `button`.
button.removeEventListener('click', buttonClickFunc);
// Assign the new element to the `button` because it's dynamically changing!
button = custom.getElementsByClassName("button")[0];
// Compare the `previousLabel` to the current `button` label.
if (previousLabel !== button.innerHTML) {
clearInterval(elemReadyCheckInterval);
// If the dynamic label is 'Default'.
if (button.innerHTML === 'Default')
button.innerHTML = 'Custom Default';
button.addEventListener("click", function () {
buttonClick(custom, button);
});
}
}, 10);
}
</script>
<?php
}
}
I haven’t found to change the non-frame labels by overriding the other functions such content_template()
and render_content()
, I just got a hard time by trying to implement in those ways because those function blocks will just be used if you set a new $type
but setting a new type will make all the button functionalities gone, that’s why I didn’t reassign a new $type
.
And the unchanging of the non-frame $button_labels
by doing this, is a bug!
$this->button_labels = array(
'select' => __( 'Custom Select Image' ),
'change' => __( 'Custom Change Image' ),
'remove' => __( 'Custom Remove' ),
'default' => __( 'Custom Default' ),
'placeholder' => __( 'Custom No image selected' ),
);