Support » Developing with WordPress » customize_controls_enqueue_scripts doesn’t fire from within my plugin

  • Resolved Sean


    UGH – ignore this, or read on if you want to waste your time.
    (the problem was I was not wrapping my function is an array($this,’function’); wrapper)

    I have a plugin that builds a Class which handles injecting Customizer features.

    Within it I am inserting: Customizer Panel > Section > Settings/Controls

    The controls I am I am injecting

    – a Select drop-down Input (‘type’ => ‘select’,)
    – an WP_Customize_Cropped_Image_Control control

    **Both Controls show up, and both work as expected. fantastic**

    To improve the experience, I’m trying to modify the controls so that changing the selector hides/shows the Image Upload control accordingly.

    I am trying to enqueue a customizer-control.js file using the hook ‘customize_controls_enqueue_scripts’. (I realize that while the ‘wp_enqueue_scripts’ will pull in my file, it is not scoped to the $wp_customizer object when I do, so I can’t use that)

    I have a JS script that I want to test (the contents of which are moot right now)
    – add_action( ‘customize_controls_enqueue_scripts’, ‘controls_scripts_enqueue’);

    **But** *and this is the main problem I’m asking about*….it seems that the customize_controls_enqueue_scripts Hook is not working as expected.

    Using XDebug to step through my code, the add_action method is hit, but the Hook action never fires.

    In my reading, I see lots of references to “you just have to use ‘customize_controls_enqueue_scripts'” but there is no indication of when it’s ‘too late’ to call to the hook.

    Any insight will help. – Why does ‘customize_controls_enqueue_scripts’ not seem to fire from within my class?

    class my_Customize_Theme_Appearance_class {
            private $localization_domain;
            public static function get_instance(){
                if(null == self::$instance){
                    self::$instance = new self;
                return self::$instance;
            private function __construct()
                $this->localization_domain = "my-customize-theme-appearance";
                add_action ('customize_register', array($this, 'my_customizer_settings'));
    	        add_action( 'customize_controls_enqueue_scripts', 'my_customize_controls_enqueue_scripts'); // DUH!! use  array($this, 'my_customize_controls_enqueue_scripts')
            public function my_customize_controls_enqueue_scripts () {
    		    wp_register_script('header_layout_script', plugins_url('public/js/header_layouts.js', __FILE__ ));
            public function my_customizer_settings( $wp_customize ) {
                 * Add our Header & Navigation Panel
                $wp_customize->add_panel( 'header_footer_navigation_panel',
                        'title' => __( 'Header, Footer, & Navigation' ),
                        'description' => esc_html__( 'Adjust Header, Footer, and Navigation options' ),
                        'priority' => 20,
                        'capability' => 'edit_theme_options',
                 * Header Layouts Switcher
                $wp_customize->add_section('theme_header_layout_section', array(
                    'title' => __('Header Layout Select', $this->localization_domain),
                    'priority'   => 10,
                    'panel' => 'header_footer_navigation_panel'
                $wp_customize->add_setting('my_header_layout_template_setting', array(
                    'default' => 'custom',
                    'transport' => 'postMessage'
                $wp_customize->add_control('my_header_layout_select_control', array(
                        'section' => 'theme_header_layout_section',
                        'settings' => 'my_header_layout_template_setting',
                        'label' => __('Header Layout Select', $this->localization_domain),
                        'description' => __('', $this->localization_domain),
                        'type' => 'select',
                        'choices' => array(
                            'custom' => __('Default (custom)', $this->localization_domain),
                            'dealer_name' => __('Alternate 1', $this->localization_domain),
                            'dealer_logo' => __('Alternate 2', $this->localization_domain),
                $wp_customize->add_setting('my_header_logo_image_setting', array(
                    'default' => 'placeHolder',
                    'capability' => 'edit_theme_options',
                    'sanitize_callback' => 'absint'
                $wp_customize->add_control(new WP_Customize_Cropped_Image_Control($wp_customize, 'my_header_logo_image_setting', array(
                        'section' => 'theme_header_layout_section',
                        'label' => __('Logo Image', $this->localization_domain),
                        'description' => __('', $this->localization_domain),
                        'mime_type' => 'image',
                        'flex_width' => false,
                        'flex_height' => false,
                        'width' => 250,
                        'height' => 45,
                $wp_customize->selective_refresh->add_partial('my_header_layout_template_setting', array(
                        'selector' => '#site-header',
                        'container_inclusive' => false,
                        'fallback_refresh' => true
        } //end class

    (why is CODE formatting not working in this post)

    • This topic was modified 1 month, 1 week ago by Sean.
    • This topic was modified 1 month, 1 week ago by Sean.
    • This topic was modified 1 month, 1 week ago by Steve Stern. Reason: formatting
    • This topic was modified 1 month, 1 week ago by Sean.
  • You must be logged in to reply to this topic.