Another customizer question: I’m trying to add a custom control that’s meant to customize the appearance of a specific widget area (like change the background color). Example:
And I can do it, by passing the section id of that particular widget area (“sidebar-widgets-front-page-1”) when calling add_control. But because the customizer will hide any control in this panel/section that isnt an ‘active’ widget for the current view, my custom control gets hidden with CSS by default. Now I can certainly just unhide it with CSS…. but that seems hacky. Surely there is a better way? The fact that I can only find one other person on the entire internet asking this question leads me to think I’m approaching this wrong in the first place. Perhaps the Widgets panel in the customizer is only meant for customizing individual widgets…. and to customize actual widget areas, perhaps I should create my own custom section?
The fact is that the widget sidebar sections in the customizer were indeed only meant for to contain controls for individual widgets and the control at the bottom that contains the Add Widget button. Another challenge with the desire here is that Richard wants to add a control to the very top of the section before the section’s description itself (at least from his screenshot). The customizer API doesn’t directly allow you to register controls to appear here. However, this doesn’t mean that controls can’t be added there. (Also, better support for controls appearing outside of their normal contexts once core implements #38077, #37964, #30738.)
Check out this plugin which demonstrates a solution for implementing a control allows for the background color for a given sidebar to be managed: Customize Widget Sidebar Meta (on GitHub).
Here is a video showing the functionality:
Now, I’m currently at LoopConf 2.1 and yesterday I co-lead a workshop on the customizer, and during the afternoon I presented a deep-dive on the customizer JS APIs. It turns out that adding meta fields to a widget sidebar customizer section here provides a good demonstration of some the JS API, including:
- Extending sections of a given type.
- Using partials as a construct for doing live preview even when server-side rendering isn’t necessary.
Another demonstration plugin I prepared for the workshop goes beyond these and tries to make use of as many of the JS API as possible: Customize Featured Content (on GitHub).