customize-controls.js - extend api.previewer

Question

I want to remove this check -> if ( value._dirty ) from code snippet below, but as it is located in Wordpress core file(customize-controls.js line 1919)

I can't edit that, I need to accomplish that from my theme's custom js file, but I don't know how, as I guess it should be extended and enqueued correctly. code:

        // Initialize Previewer
    api.previewer = new api.Previewer({
        container:   '#customize-preview',
        form:        '#customize-controls',
        previewUrl:  api.settings.url.preview,
        allowedUrls: api.settings.url.allowed,
        signature:   'WP_CUSTOMIZER_SIGNATURE'
    }, {

        nonce: api.settings.nonce,

        query: function() {
            var dirtyCustomized = {};
            api.each( function ( value, key ) {
                if ( value._dirty ) {
                    dirtyCustomized[ key ] = value();
                }
            } );

            return {
                wp_customize: 'on',
                theme:      api.settings.theme.stylesheet,
                customized: JSON.stringify( dirtyCustomized ),
                nonce:      this.nonce.preview
            };
        },

        save: function() {
            var self  = this,
                query = $.extend( this.query(), {
                    action: 'customize_save',
                    nonce:  this.nonce.save
                } ),
                processing = api.state( 'processing' ),
                submitWhenDoneProcessing,
                submit;

            body.addClass( 'saving' );

            submit = function () {
                var request = $.post( api.settings.url.ajax, query );

                api.trigger( 'save', request );

                request.always( function () {
                    body.removeClass( 'saving' );
                } );

                request.done( function( response ) {
                    // Check if the user is logged out.
                    if ( '0' === response ) {
                        self.preview.iframe.hide();
                        self.login().done( function() {
                            self.save();
                            self.preview.iframe.show();
                        } );
                        return;
                    }

                    // Check for cheaters.
                    if ( '-1' === response ) {
                        self.cheatin();
                        return;
                    }

                    // Clear setting dirty states
                    api.each( function ( value ) {
                        value._dirty = false;
                    } );
                    api.trigger( 'saved' );
                } );
            };

            if ( 0 === processing() ) {
                submit();
            } else {
                submitWhenDoneProcessing = function () {
                    if ( 0 === processing() ) {
                        api.state.unbind( 'change', submitWhenDoneProcessing );
                        submit();
                    }
                };
                api.state.bind( 'change', submitWhenDoneProcessing );
            }

        }
    });

Answer 1

From your comment, I think you are wrong in the concept. You want to save theme options after first activation. Activate a theme doesn't mean that the user will use the theme customizer, so I think there is nothing to do with the customizer javascript because it will be loaded only if the user go to the customizer screen and because is a client-side code. There are better ways.

My suggestion is to use after_switch_theme and switch_theme actions hooks:

• after_switch_theme to save theme options after the theme is activated.
• switch_theme to remove theme options if the theme is deactivated (optional)

Example:

add_action("after_switch_theme", "cyb_save_theme_options_on_activation");
function cyb_save_theme_options_on_activation() {
    set_theme_mod('background-color', '#FFF');
}

I think it would be good to check if the option being added/update has a user custom value; if so I think it shouldn't be changed. For example:

add_action("after_switch_theme", "cyb_save_theme_options_on_activation");
function cyb_save_theme_options_on_activation() {
    if( get_theme_mod('background-color') == '' ) {
        set_theme_mod('background-color', '#FFF');
    }
}

If you are using theme options instead of theme mods:

add_action("after_switch_theme", "cyb_save_theme_options_on_activation");
function cyb_save_theme_options_on_activation() {
    //add_option adds the option if it doesn't exist in the database
    //Use update_option if you want to override existing option in the database or add it if doesn't exist
    add_option('background-color', '#FFF');
}

I'm still think that you are wrong in the approach. From your comment, you want to save all options into database, even options with default values, when the use click on "Save and Publish" and not on theme activation. To do that, you could use customize_save_after action hook:

add_action( 'customize_save_after', 'customize_save_after' );
function customize_save_after( $wp_customize ) {
    //Save the theme options here
}