Understanding WordPress Customizer JS API

Question

I have been trying to educate myself to create new panels sections and controls dynamically using the WordPress customizer's JS API.

It has been frustrating and I was unable to get the exact way to achieve this via JS API.

So far, this is some thing I am doing to make it happen but with no success:

// for Settings
api.create( 
    params.id, 
    params.id, 
    params.default, 
    params.args 
);

// for controls
var controlConstructor = api.controlConstructor[controlparams.type];
var control = new controlConstructor(controlparams.id, {
    params: controlparams,
    previewer: api.previewer
});
api.control.add( 
    controlparams.id, 
    control 
);

 //for Sections
 var section = new api.Section(sectionparams.id, { 
    params: sectionparams
 }); 
api.section.add( sectionparams.id, section );
api.section(sectionparams.id).activate();

None of them seem to work as the section doesn't appear and I have to run wp.customize.section(sectionparams.id).activate() twice in console to make the section appear, the same is with control.

Answer 1

Read the documentation about the JS API

You also can find advanced examples in this plugin

Answer 2

Adding Sections and settings to your theme is done in the functions.php file where you can add new settings and sections.

The JavaScript part that you are attempting to use is only used for the LIVE Preview section, when you are actually changing theme settings.