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.

What API are you using? I was trying to read up the [official wordpress documentation](https://codex.wordpress.org/Theme_Customization_API#Adding_a_New_Section), but did not find anything. What is the `api` object? — m3o, May 13 '15 at 04:27
`api` is the `wp.customize` object. I'd like know how to render customizer assets (panels, sections, controls and settings) via its javascript api. — Aniruddh, May 14 '15 at 20:45
I would like to answer your questions about WordPress Customize API, but your original question lacks some details, `controlparams` and `sectionparams` in particular. Also, giving away some server-side code for review would be nice. (I believe I can help you because I've learnt some WP Customize API karate and stuff.) — Pavel S., Oct 28 '15 at 17:30
This post explains it perfectly: https://wordpress.stackexchange.com/q/305959/14008 — Marc Wiest, Jun 28 '18 at 07:33

score 2 · Answer 1 · answered Jul 18 '15 at 00:12

2

Read the documentation about the JS API

You also can find advanced examples in this plugin

answered Jul 18 '15 at 00:12

Laurent

1,048
11
23

JS API doc doesn't look much helpful in this case. :( – Aniruddh Aug 05 '15 at 16:27

score -4 · Answer 2 · answered May 14 '15 at 21:03

-4

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.

answered May 14 '15 at 21:03

Richard Christensen

2,046
17
28

You're talking about PHP API which is I am well aware about. The question here is regarding JS API which makes the use of `wp.customize` JS object. – Aniruddh May 14 '15 at 21:06
When you say you have to run `api.section(sectionparams.id).activate()` 2x do you mean the first time when the page loads and then manually in the console or just 2x in the console? – Richard Christensen May 14 '15 at 21:13
Have you tried wrapping your code in an anoymous function like it shows in the example? Also, why are you using `api` instead of `wp.customize` `(function($){ //Code Here })(jQuery);` – Richard Christensen May 14 '15 at 21:15
Yeah, I did. In my code it is done like this `(function($,api){ //Code Here })(jQuery, wp.customize);` hence the `api`. :) – Aniruddh May 14 '15 at 21:21

Understanding WordPress Customizer JS API

2 Answers2