Using WordPress ‘customize_controls_enqueue_scripts’ PHP action

by

The customize_controls_enqueue_scripts WordPress PHP action allows you to enqueue your own scripts and styles for the WordPress Theme Customizer.

Usage

add_action('customize_controls_enqueue_scripts', 'my_custom_enqueue_scripts');
function my_custom_enqueue_scripts() {
// your custom code here
}

Parameters

This action hook doesn’t have any parameters.

More information

See WordPress Developer Resources: customize_controls_enqueue_scripts

Examples

Enqueue a custom JavaScript file

Enqueue a custom JavaScript file for your theme’s customizer controls.

add_action('customize_controls_enqueue_scripts', 'my_theme_customizer_scripts');

function my_theme_customizer_scripts() {
    wp_enqueue_script('my-theme-customizer', get_template_directory_uri() . '/js/customizer.js', array('jquery', 'customize-controls'), '1.0.0', true);
}

Enqueue a custom CSS file

Enqueue a custom CSS file for styling your theme’s customizer controls.

add_action('customize_controls_enqueue_scripts', 'my_theme_customizer_styles');

function my_theme_customizer_styles() {
    wp_enqueue_style('my-theme-customizer', get_template_directory_uri() . '/css/customizer.css', array(), '1.0.0');
}

Localize a script

Localize a script to pass data from PHP to JavaScript.

add_action('customize_controls_enqueue_scripts', 'my_theme_customizer_localize_scripts');

function my_theme_customizer_localize_scripts() {
    wp_enqueue_script('my-theme-customizer', get_template_directory_uri() . '/js/customizer.js', array('jquery', 'customize-controls'), '1.0.0', true);

    $localization_data = array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'some_data' => 'This is some data',
    );

    wp_localize_script('my-theme-customizer', 'myThemeCustomizer', $localization_data);
}

Enqueue a Google Font

Enqueue a Google Font for use in your theme’s customizer controls.

add_action('customize_controls_enqueue_scripts', 'my_theme_customizer_google_fonts');

function my_theme_customizer_google_fonts() {
    wp_enqueue_style('my-theme-google-fonts', 'https://fonts.googleapis.com/css?family=Roboto&display=swap', array(), null);
}

Enqueue a font icon library

Enqueue a font icon library, such as Font Awesome, for use in your theme’s customizer controls.

add_action('customize_controls_enqueue_scripts', 'my_theme_customizer_font_awesome');

function my_theme_customizer_font_awesome() {
    wp_enqueue_style('my-theme-font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css', array(), '6.0.0-beta3');
}