How to use customize_preview_init filter in WordPress

customize_preview_init filter

Fires once the Customizer preview has initialized and JavaScript settings have been printed.

To use customize_preview_init filter, first you have to register it using add_filter. You can write this code into functions.php of your activated theme or in a custom WordPress Plugin.

We at WePlugins always prefer to create a custom WordPress Plugin while using hooks so nothing breaks when you update your WordPress Theme in the future.

In the below live example, we have defined a function modify_customize_preview_init_defaults which takes 1 parameter and we registered using add_filter. The first parameter customize_preview_init is the name of the hook, the second parameter modify_customize_preview_init_defaults is the name of the function which needs to be called, the third parameter is the priority of calling the hook if the same hook is used multiple times, and the last parameter is the number of arguments (if any) to be passed in the registered function.

Sometimes, you have to remove a registered hook, so you can use remove_filter to remove customize_preview_init filter.

Parameters

Below the 1 parameter is required to use this hook.

• $manager : (WP_Customize_Manager) WP_Customize_Manager instance.

Live Example 1

This outputs the javascript needed to automate the live settings preview. Also keep in mind that this function isn’t necessary unless your settings are using ‘transport’=>’postMessage’ instead of the default ‘transport’=>’refresh’.

Used by hook: ‘customize_preview_init’

    public static function weplugins_customizer_live_preview() {
        // Point to file
    }
    

Live Example 2

Below is an example of how you can use this hook.

    function weplugins_modify_customize_preview_init_defaults($manager) {
        // Update the $manager variable according to your website requirements and return this variable.
        // You can modify the $manager variable conditionally too if you want.
        return $manager; 
    }
    // add the filter
    add_filter("customize_preview_init", "weplugins_modify_customize_preview_init_defaults", 10, 1);
    

Live Example 3

To remove a hook callback, use the example below.

    remove_filter("customize_preview_init", "weplugins_modify_customize_preview_init_defaults", 10, 1);
    

Please make sure to provide the same callback function name, priority, and number of arguments while removing the hook callback.

Contact Us

If you’re having any trouble using this hook, please contact our WordPress Development Team and we’d be happy to assist you.