it is very difficult to find an online article, or even in the WP codex, to create a section inside a section for the theme options. the below screenshot shows what i am trying to create:

i have the simple code below creating such, but i am not sure how to create a section inside a section. any help would be greatly appreciated, and help a future developer.

function site_customize_register( $wp_customize ) {
    /**
     * section
     */
    //so called "parent" section
    $wp_customize->add_section("homepage_options",[
        "title" => __("Homepage Options", "customizer_homepage_options_section"),
        "priority" => 10,
    ]);
    //so called "parent" section
    $wp_customize->add_section("homepage_options_donate_now",[
        "title" => __("Donate Now", "customizer_homepage_options_section"),
        "priority" => 10,
    ]);

    /**
     * setting
     */
    $wp_customize->add_setting("four_image_cta_block", [
        "default" => "",
        "transport" => "postMessage",
    ]);
    $wp_customize->add_setting("four_image_cta_block_two", [
        "default" => "",
        "transport" => "postMessage",
    ]);
    $wp_customize->add_setting("four_image_cta_block_three", [
        "default" => "",
        "transport" => "postMessage",
    ]);
    $wp_customize->add_setting("four_image_cta_block_four", [
        "default" => "",
        "transport" => "postMessage",
    ]);

    /**
     * control
     */
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block",
        [
            "label" => __("First Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block",
            "type" => "textarea",
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block_two",
        [
            "label" => __("Second Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block_two",
            "type" => "textarea",
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block_three",
        [
            "label" => __("Third Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block_three",
            "type" => "textarea",
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block_four",
        [
            "label" => __("Fourth Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block_four",
            "type" => "textarea",
        ]
    ));

}

it is very difficult to find an online article, or even in the WP codex, to create a section inside a section for the theme options. the below screenshot shows what i am trying to create:

i have the simple code below creating such, but i am not sure how to create a section inside a section. any help would be greatly appreciated, and help a future developer.

function site_customize_register( $wp_customize ) {
    /**
     * section
     */
    //so called "parent" section
    $wp_customize->add_section("homepage_options",[
        "title" => __("Homepage Options", "customizer_homepage_options_section"),
        "priority" => 10,
    ]);
    //so called "parent" section
    $wp_customize->add_section("homepage_options_donate_now",[
        "title" => __("Donate Now", "customizer_homepage_options_section"),
        "priority" => 10,
    ]);

    /**
     * setting
     */
    $wp_customize->add_setting("four_image_cta_block", [
        "default" => "",
        "transport" => "postMessage",
    ]);
    $wp_customize->add_setting("four_image_cta_block_two", [
        "default" => "",
        "transport" => "postMessage",
    ]);
    $wp_customize->add_setting("four_image_cta_block_three", [
        "default" => "",
        "transport" => "postMessage",
    ]);
    $wp_customize->add_setting("four_image_cta_block_four", [
        "default" => "",
        "transport" => "postMessage",
    ]);

    /**
     * control
     */
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block",
        [
            "label" => __("First Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block",
            "type" => "textarea",
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block_two",
        [
            "label" => __("Second Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block_two",
            "type" => "textarea",
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block_three",
        [
            "label" => __("Third Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block_three",
            "type" => "textarea",
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block_four",
        [
            "label" => __("Fourth Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block_four",
            "type" => "textarea",
        ]
    ));

}

• themes
• theme-options

2 Answers 2

It appears that there is not a simple way of doing this. Looking around, I see 2 ways you could do something like this.

The first, and in my opinion less elegant way would be to inject HTML into the section's description parameter. You could then wire some JS to your custom HTML to make it work the way you want.

The second way you could do something like this would be by extending the builtin WP_Customize_Control class to create a control that shows/hides another group of controls. Something like

class Expand_Other_Control extends WP_Customize_Control{
    public $type = 'button';
    protected $controlledElements = array();

    public function __construct($manager, $id, $args = array()){
        parent::construct($manager,$id,$args);
        if( isset($args['settings']) ){
            $this->controlledElements = $args['settings'];
            //$this->settings may or may not be an array, we need it to be an array for our custom render function
            is_array($this->controlledElements) or $this->controlledElements = array($this->controlledElements);
        }
    }

    public function render_content(){
        echo '<button class="expand" data-elements="'.json_encode($this->controlledElements).'>Expand '. $this->label . '</button>';

    }
}

Then you would use it like this:

$wp_customize->add_control(
    new Expand_Other_Control (
        $wp_customize,
            'your_setting_id',
            array(
                'label'          => __( 'Button's Label' ),
                'section'        => 'your_section_id',
                'settings'       => 'your_setting(s)_id',        
        )
    )
);

Please note, this is more of an off the cuff proof of concept. You would still need to create your own JS to make all of this work and this needs some modification and validation.

You can use add_panel to do this. You create a panel, then add sections to it to create children.

$wp_customize->add_panel( 'panel_id', array(
    'priority'       => 10,
    'capability'     => 'edit_theme_options',
    'theme_supports' => '',
    'title'          => '',
    'description'    => '',
) );

$wp_customize->add_section( 'homepage_options_donate_now', array(
    'title' => __( 'Donate Now', 'customizer_homepage_options_section' ),
    'priority' => 10,
    'panel' => 'pabel_id',
) );