Customizer JS API logic

I will have a frame with a collection of panels. One of those panels will preview a collection of dynamic sections. By default this panel will have one section. There will be controls to add, remove and rearrange sections. When a section is created it will have two default controls, section title and section layout. Section layout will dynamically create new controls to edit the preview of that section.

Real Word Example.

  • A Panel will be call ‘testimonials’ .
  • When that panel is opened it will have one default section ‘Testimonial Section (1)’
  • There will be controlls to add, remove and rearrange sections. ‘testimonial two, testimonial three…’
  • When a section is opened there will be two default controls.

    • Section name: will name the section and its menu accordingly.
    • Section layout: a selector that will activate and deactivate controlls and choose a layout for the preview for that section.
    • Once a section layout is selected basic conrols such as upload image or gallery, color select and multiple input fields will activate.
  • The preview will contain all the sections in the same priority as the sections menu.

I have read the handbook on Customizer JS API, looked through core development post and the post Customizer plugin. Wordpress has ADVISED TO USE ONLY JS API when building a Customizer to ensure it is future proof. I understand they have removed the PHP and using only JS so I have a few questions.

  1. How do I build custom Panels, sections and controls using the JS API?
  2. How do I dynamically add sections?
  3. Will backbone & underscore be replaced with react and other components?

enter image description here


1 Answer 1


What you are looking for here is already 80% available already, if you use the Customize Posts plugin and enable the Testimonials content type in Jetpack. Sections for testimonial posts can be listed in a Testimonials panel, in addition to a Select2 to jump to one:

List of testimonials

And then when expanding the testimonial section there are fields for the name and featured image and others:

Testimonial fields

You'll note that there is currently a lack of a “order” field. For that, you'll want to follow:

Also, you'll note that the panel does not show all of the posts of that type when it is expanded. Sections are currently added as they appear in the preview or as they are added via the Select2 dropdown. For listing all posts, you can follow List all posts of a given post type in the section.

As for adding custom fields to a custom post type, such as extending the Jetpack Testimonials, you could refer to the examples of adding postmeta in Customize Posts (featured image and page template) or you could look at this new standalone example (which is still rough and needs to be refined).

  • Hey Weston! Your Customizer development is sweet. Can the post be queried to only show post by the current user? Can the Customizer handle hundreds of users at the same time? Aug 25, 2016 at 16:33
  • @Bradklosterman: If a user doesn't have the capability to edit a given post, then the post will not be queried in the dropdown or listed among the post sections. As for handling hundreds of users at the same time, I would say it depends on the robustness of your server, similarly to hundreds in the WP Admin at once. We are working on a feature plugin for improving concurrency locking in the customizer, but this won't matter if users are only editing their own posts. See <github.com/xwp/wp-customize-concurrency>. Nevertheless, Customize Posts does support post locking. Aug 26, 2016 at 19:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.