0

I never tried to use the theme customizer, somehow I don't find that thing good. But recently I tried it, and stuck into this matter.

I extended the Class WP_Customize_Control to made my own <select multiple="multiple"> control, and it's working fine.

Now I want to trigger the select2 jQuery plugin to that particular control so that I can assure good UX using the field.

But I failed. :(

<?php
function wpse20170307_customize_preview_js() {
    wp_enqueue_style( 'select2', get_template_directory_uri() .'/libs/select2/select2.min.css', array(), '4.0.3', 'all' );
    wp_register_script( 'select2', get_template_directory_uri() .'/libs/select2/select2.min.js', array( 'customize-preview' ), '4.0.3', true );

    wp_enqueue_script( 'my_customizer', get_template_directory_uri() . '/assets/js/customizer.js', array( 'customize-preview', 'select2' ), '1.0.0', true );
}

add_action( 'customize_preview_init', 'wpse20170307_customize_preview_js' );

This action hook isn't enqueuing the necessary plugin scripts or styles either. So putting code like:

$('.customize-control-multiple-select select').addClass('some');

isn't working at all.

I tried enqueuing select2 using wp_enqueue_scripts and using to put the above code into customizer.js, but I failed again.

With the customizer called, using the "View Page Source", I found no such select2 things anywhere, but the select2 is properly enqueued with wp_enqueue_scripts in the main site.

Is there any way or how can I do so?

Update - 2017-03-12

With the help of Weston Ruter, I managed to become close to a solution. Here's what I got so far:

public $type = 'multiple_select';

And enqueued a JS file like below:

wp_enqueue_script( 'project-customizer-inject', get_template_directory_uri() . '/assets/js/project-customizer-inject.js', array( 'customize-controls', 'select2' ), '1.0.0', true );

And in this file:

// Set up select2 control in this.container...
console.log(control);
control.id = id;
console.log(id); // id is not defined
//control.select2(); // function select2 not found
//id.select2(); // not working, as id is not set

console.log(control); returned:

js-console-child

Issue is, I'm not that good at JavaScripts. So, I cannot get through the object I got with controls. And select2 plugin cannot be found within that ready: function() {}.

1

First, in order to enqueue JS in the customizer controls, you need to use the customize_controls_enqueue_scripts action. This is different than the action used to enqueue scripts into the customizer preview, which is what themes normally do via customize_preview_init or wp_enqueue_scripts. So in your snippet above, replace customize_preview_init with customize_controls_enqueue_scripts.

Secondly, in order to extend a control in the customizer you need to wait for the control to be initialized. Controls may be added and removed dynamically in the course of a customizer session, so you cannot just query the DOM once the page is ready. Your custom control should implement a corresponding JS wp.customize.Control subclass that is responsible for setting up Select2. For example, if you have:

class My_Select2_Control extends WP_Customize_Control {
    public $type = 'my_select2';
    /* ... */
}

Then you should have a JS file that also contains:

wp.customize.controlConstructor.my_select2 = wp.customize.Control.extend( {
    ready: function() {
        var control = this;
        wp.customize.Control.prototype.ready.call( control );
        // Set up select2 control in this.container...
    }
} );

Enqueue this file at customize_controls_enqueue_scripts with customize-controls and select2 as its script dependencies.

  • Thank you for the solution. Already upvoted the answer. But due to lack of necessary knowledge, I got stuck to a point. Updated my question. Any update would be greatly appreciated. – Mayeenul Islam Mar 12 '17 at 16:54

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.