1

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:

Schema

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:

  1. What if the user wants another new style? Do I cache the settings for that style they now no longer use for future usage?

  2. 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?

1

I didn't really used Customizer, but what you need is called „conditional display” (at least this is the term used in ACF & co).

That being said, I found this article that may help you:

https://florianbrinkmann.com/en/3783/conditional-displaying-and-hiding-of-customizer-controls-via-javascript/

Also, this SE topic:

Is it possible to conditionally displaying and hiding of customizer controls for each device preview?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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