0

I'd tried a lot just to change the 'default' button label of a Customize_Image_Control, including copying its class source and re-classname it (*kindly check the non-revised edition for this), and extending the class and use it like this:

if (class_exists('WP_Customize_Image_Control')) {
  class WP_Customize_Custom_Control extends WP_Customize_Image_Control {
    public function __construct( $manager, $id, $args = array() ) {
      parent::__construct( $manager, $id, $args );

      $this->button_labels = array(
        'select'       => __( 'Custom Select Image' ),
        'change'       => __( 'Custom Change Image' ),
        'remove'       => __( 'Custom Remove' ),
        'default'      => __( 'Custom Default' ),
        'placeholder'  => __( 'Custom No image selected' ),
        'frame_title'  => __( 'Custom Select Image' ),
        'frame_button' => __( 'Custom Choose Image' ),
      );
    }
  }
}
add_action( 'customize_register', 'custom_customize_register' );
function custom_customize_register( $wp_customize ) {
  $wp_customize->register_control_type( 'WP_Customize_Custom_Control' );

  // More customize code here...

  $wp_customize->add_control(
    new WP_Customize_Custom_Control(
      $wp_customize,
      'custom',
      array(
        'label'       => __( 'Label' ),
        'description' => __( 'Description here..' ),
        'section'     => 'section_id',
        'settings'    => 'setting_id',
      )
    )
  );
}

And I found that only the assigned values to the button labels 'frame_title' and 'frame_button' are showing, the others are not. I've managed to make the other labels changed by providing a unique public $type like this:

if (class_exists('WP_Customize_Image_Control')) {
  class WP_Customize_Custom_Control extends WP_Customize_Image_Control {

    public $type = 'custom'; // THIS IS THE NEW TYPE

    public function __construct( $manager, $id, $args = array() ) {
      // ...

The button labels will definitely changed but the buttons are not clickable anymore and their styles are gone and it seems that their functionalities are all gone. Anyone know how to fix this?

The other questions related about this that are posted in the other Q&A sites for WordPress:

  • I even tried to copy the to_json() and content_template() of its parent and replace such instances of 'image' === $type with 'custom' === $type. – 5ervant Aug 4 '15 at 9:13
  • My plan for now is to reimplement the class and all its parent classes and change such instances of 'image' === $type with 'custom' === $type. – 5ervant Aug 4 '15 at 11:03
0

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' ),
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.