Wordpress - Theme Customizer : how to create multiple-level panel

For anyone that comes here looking for this, I was able to do it after battling with it for a few hours.

The code is a bit extensive so did not want to post here, (mods feel free to let me now if that would be better), instead I created a gist: https://gist.github.com/OriginalEXE/9a6183e09f4cae2f30b006232bb154af

What it does is it basically allows you yo specify panel property on panels (for nesting panels under panels) and section property on sections (for nesting sections under sections).

Notes:

  • The php code includes an example of how to create panels/sub-panels/sections/sub-sections. It is worth noting that you instantiate new panels/sections using the subclass I created, instead of directly calling $wp-customize->add_panel and passing it a configuration array.
  • JS and CSS files don't need to be modified. If you were wondering why CSS is needed, it's there to fix the animation when transitioning from panels to sub-panels and sections to sub-sections.
  • When creating sub-sections, make sure you also add a panel property which should be the same as the panel of the parent section

I tried to do this with as little code as possible, and without overriding anything that might screw up with others people code. Some refactoring might be needed if they change logic in the future versions, I made it as future-proof as I could.


At the moment it is simply not possible to have more than panels, sections and controls. Expanding this system would require extensive programming at WP. Given the narrow size of the customizer you could also easily get lost if you have so many nested panels. So it's probably not desirable either.