Using WordPress ‘customize_controls_head’ hook’ PHP action

The customize_controls_head WordPress PHP action fires in the head section of the Customizer controls.

Usage

add_action('customize_controls_head', 'my_custom_controls_head');
function my_custom_controls_head() {
    // your custom code here
}

Parameters

  • None

More information

See WordPress Developer Resources: customize_controls_head

Examples

Add custom CSS to the Customizer controls

This example adds custom CSS to style the Customizer controls.

add_action('customize_controls_head', 'my_custom_controls_head_css');
function my_custom_controls_head_css() {
    echo '<style>
        /* your custom CSS here */
    </style>';
}

Add custom JavaScript to the Customizer controls

This example adds custom JavaScript to enhance the functionality of the Customizer controls.

add_action('customize_controls_head', 'my_custom_controls_head_js');
function my_custom_controls_head_js() {
    echo '<script>
        // your custom JavaScript here
    </script>';
}

Add a custom Google Font to the Customizer controls

This example adds a custom Google Font to the Customizer controls to style text elements.

add_action('customize_controls_head', 'my_custom_controls_head_google_font');
function my_custom_controls_head_google_font() {
    echo '<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">';
}

Add a custom favicon to the Customizer controls

This example adds a custom favicon to the Customizer controls to improve branding.

add_action('customize_controls_head', 'my_custom_controls_head_favicon');
function my_custom_controls_head_favicon() {
    echo '<link rel="shortcut icon" href="/path/to/your/favicon.ico" />';
}

Add custom meta tags to the Customizer controls

This example adds custom meta tags to the Customizer controls to improve SEO and accessibility.

add_action('customize_controls_head', 'my_custom_controls_head_meta');
function my_custom_controls_head_meta() {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
    echo '<meta name="description" content="My Customizer Controls">';
}