Sometimes we need to hide a WordPress customizer control out of view based on the value of another customizer control.
In my case, I needed a way to hide a customizer control during the initial loading of the customizer or loading of a customizer for the first time before any default values get stored in the database.
If you spent time googling around you probably came across these 3 solutions. The reason why these 3 stood out is because of the majority of other websites copy/paste these solutions.
The above worked for me when you performed an action by clicking or selecting a value. But didn’t work after customizer was loaded.
Because the code wasn’t firing after the hook wp.customize.bind( 'ready' I wanted to try initializing default values for all my settings and storing them in the database.
I came across another interesting article showing you how to do this. Strangely the author uses customize_save_afterafter_theme_setup
To test the theory and to avoid the hurdle of trying out the code which would init defaults. I decided to manually update my values for the customizer. I clicked on my controls, selected random values and clicked Publish.
The JS code didn’t work. It was only working when I would perform an action but completely ignored wp.customize.bind( 'ready'
At this stage, I decided to explore default WordPress themes looking for controls which were dependant on other customizer controls. It didn’t take me long before I stumbled on colors control for the ‘
As you can see in the image below, the first radio button with the label of ‘Default’ is selected when you load the theme for the first time. But if you click on the radio button with the label ‘Custom’ a HUE control appears.
The value for the Primary Color is not stored in the database at this stage, which is ideal. After looking under the hood, I extracted the JS code responsible for controlling the visibility state of the second customizer control.