Using WordPress ‘customize_controls_print_footer_scripts’ PHP action

by

The customize_controls_print_footer_scripts WordPress PHP action is used to print templates, control scripts, and settings in the footer of the WordPress Customizer.

Usage

add_action('customize_controls_print_footer_scripts', 'your_function_name');
function your_function_name() {
    // your custom code here
}

Parameters

  • No parameters for this action.

More information

See WordPress Developer Resources: customize_controls_print_footer_scripts

Examples

Adding a Custom JS Template

Add a custom JavaScript template to the footer of the Customizer.

add_action('customize_controls_print_footer_scripts', 'add_custom_js_template');
function add_custom_js_template() {
    ?>
    <script type="text/html" id="tmpl-custom-template">
        <div class="custom-template">
            <h3>{{ data.title }}</h3>
            <p>{{ data.description }}</p>
        </div>
    </script>
    <?php
}

Adding Custom CSS to the Customizer

Add custom CSS styles to the footer of the Customizer.

add_action('customize_controls_print_footer_scripts', 'add_custom_css_styles');
function add_custom_css_styles() {
    ?>
    <style>
        .custom-button {
            background-color: #0085ba;
            border: none;
            color: white;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
        }
    </style>
    <?php
}

Adding Custom JS for Custom Control

Add custom JavaScript for handling a custom control in the Customizer.

add_action('customize_controls_print_footer_scripts', 'add_custom_control_js');
function add_custom_control_js() {
    ?>
    <script>
        (function ($) {
            wp.customize.controlConstructor['custom-control'] = wp.customize.Control.extend({
                ready: function () {
                    var control = this;
                    // your custom control logic here
                }
            });
        })(jQuery);
    </script>
    <?php
}

Adding a Custom Section Template

Add a custom section template for the Customizer.

add_action('customize_controls_print_footer_scripts', 'add_custom_section_template');
function add_custom_section_template() {
    ?>
    <script type="text/html" id="tmpl-custom-section">
        <li class="custom-section customize-section">
            <!-- your custom section template here -->
        </li>
    </script>
    <?php
}

Adding Custom JS for Custom Panel

Add custom JavaScript for handling a custom panel in the Customizer.

add_action('customize_controls_print_footer_scripts', 'add_custom_panel_js');
function add_custom_panel_js() {
    ?>
    <script>
        (function ($) {
            wp.customize.panelConstructor['custom-panel'] = wp.customize.Panel.extend({
                ready: function () {
                    var panel = this;
                    // your custom panel logic here
                }
            });
        })(jQuery);
    </script>
    <?php
}