Using WordPress ‘customize_controls_print_styles’ PHP action

by

The customize_controls_print_styles WordPress action fires when Customizer control styles are printed.

Usage

add_action('customize_controls_print_styles', 'your_custom_function');

function your_custom_function() {
    // Your custom code here
}

Parameters

None

More information

See WordPress Developer Resources: customize_controls_print_styles

Examples

Add custom CSS for Customizer controls

Add a custom CSS file for your Customizer controls.

add_action('customize_controls_print_styles', 'load_custom_customizer_styles');

function load_custom_customizer_styles() {
    wp_enqueue_style('custom-customizer-styles', get_template_directory_uri() . '/css/custom-customizer-styles.css');
}

Add inline CSS for Customizer controls

Add inline CSS to modify the appearance of a specific Customizer control.

add_action('customize_controls_print_styles', 'add_inline_customizer_styles');

function add_inline_customizer_styles() {
    echo '<style>
        .customize-control-title {
            font-weight: bold;
        }
    </style>';
}

Load Google Fonts for your Customizer controls.

add_action('customize_controls_print_styles', 'load_google_fonts_customizer');

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

Add FontAwesome icons for Customizer controls

Load FontAwesome icons for your Customizer controls.

add_action('customize_controls_print_styles', 'load_fontawesome_customizer');

function load_fontawesome_customizer() {
    echo '<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">';
}

Add custom media query styles for Customizer controls

Add custom media query styles to improve the appearance of your Customizer controls on different screen sizes.

add_action('customize_controls_print_styles', 'add_customizer_media_queries');

function add_customizer_media_queries() {
    echo '<style>
        @media (max-width: 480px) {
            .customize-control-title {
                font-size: 14px;
            }
        }
    </style>';
}