I have the ol' dandy customizer controls, this is what I use to create a text field for my headers:
$wp_customize->add_section( 'ju_header_settings', array( 'title' => __('Header Settings', '_s'), 'priority' => 31 ) ); $wp_customize->add_setting( 'header_custom_text_top', array( 'default' => 'talking about', 'transport' => 'refresh' ) ); $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_text_1', array( 'label' => __( 'Header Text #1', '_s'), 'section' => 'ju_header_settings', 'settings' => 'header_custom_text_top', 'type' => 'text', ) ) );
Now, it just so happens that now I have multiple headers. Each with a different layout and component added to it.
This means the users can choose, from another control, which header they'd like to use:
$wp_customize->add_setting( 'header_style', array( 'default' => 'style-1', 'transport' => 'refresh' ) ); $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_selector', array( 'label' => __( 'Select the Header You Want', '_s'), 'section' => 'ju_header_settings', 'settings' => 'header_style', 'type' => 'radio', 'choices' => array( 'style-1' => 'Style One Header', 'style-2' => 'Style Two Header', ) ) ) );
My "pick the header" setting is something that the users should see first, before they see anything else. Then once they select the main style, based on what header they picked, a certain set of controls (tied to that specific header and only that) should appear dynamically. Keep in mind, this should all happen within the same Customizer section.
Here's a schema of what I'm trying to achieve:
I can't even begin to work on this due to no resources on the web that could point me in the right direction. What I could do is insert a custom class for each control and with JS, hide the certain controls that I don't need, but that feels extremely messy. Especially with keeping in mind garbage collection, where certain things need to be accounted for:
What if the user wants another new style? Do I cache the settings for that style they now no longer use for future usage?
The controls themselves, do I load them all together or do I load them dynamically as the user picks from the dropdown?
How could I approach this?