Introduction to the method enqueue_preview_scripts() in the class WP_Customize_Selective_Refresh

Introduction to the class WP_Customize_Selective_Refresh

In WordPress, when talking about customizations and live changes, the class WP_Customize_Selective_Refresh comes into play. This class allows us to view changes that occur in the customization section in real-time and without reloading the page. Many WordPress users are interested in this capability as it makes their work more efficient and smoother.

One of the important methods within this class is the method enqueue_preview_scripts(). This method is used for enqueueing scripts and styles that are needed for live previews in the customization section. In other words, when new changes are made, appropriate scripts should be enqueued to allow us to see the effects of these changes immediately.

To better understand this topic, let’s take a simple example. Suppose we have a widget that we want to change its color in real-time. In order for this change to be visible to the user immediately, we need to use enqueue_preview_scripts() to enqueue the necessary scripts for live previews.

Now, let’s take a look at the code for this method. This code allows us to enqueue the scripts needed for proper enqueueing and ensures there is no negative impact on the overall website performance.

Example Code

class My_Customizer {
    public function __construct() {
        add_action('customize_preview_init', array($this, 'enqueue_preview_scripts'));
    }

    public function enqueue_preview_scripts() {
        wp_enqueue_script(
            'my-custom-preview',
            get_template_directory_uri() . '/js/custom-preview.js',
            array('customize-preview'),
            null,
            true
        );
    }
}
new My_Customizer();

Code Explanation

class My_Customizer {
This line defines a new class called My_Customizer.

public function __construct() {
This method defines the constructor for the class that gets executed when a new instance of the class is created.

add_action('customize_preview_init', array($this, 'enqueue_preview_scripts'));
This line tells WordPress that when the preview customization section starts, it should call the method enqueue_preview_scripts().

public function enqueue_preview_scripts() {
This line defines a method that is used for enqueueing the scripts needed for the enqueueing process.

wp_enqueue_script(...);
This line enqueues a JS script that is used for live previews. 'custom-preview' is the name of the script and get_template_directory_uri() . '/js/custom-preview.js' specifies the file path of the JS file.

new My_Customizer();
This line creates a new instance of the class My_Customizer, and as a result, all defined methods are executed.