WordPress customizer: load controls in a custom div

Question

I have a custom div (holder for extra settings) which I need to load some specific controls from a specific section in there. I can get the controls in JavaScript but I can't generate the necessary HTML as WordPress do in sections.

wp.customize.section( 'custom_div_1' ).controls();

It gives an array of controls but how to generate the HTML like Site title or Tagline controls in default WordPress section.

This custom div will toggle by the left button Open extra settings.

Screenshot for easier understanding:

Any help is appreciated.

Answer 1

Put below codes in your functions.php

function sorcey_customize_register($wp_customize){

$wp_customize->add_section('sorcey_footer', array(
  'title'    => __('New Section', 'text_domain'),
  'description' => '',
  'priority' => 120,
));


/*  =============================
      Text input
===============================*/
$wp_customize->add_setting("sr_copyright", array(
        "default"       => "",
        'capability'  => 'edit_theme_options',
        "transport" => "postMessage",
    ));
    $wp_customize->add_control(new WP_Customize_Control($wp_customize, "sr_copyright_ctrl",
        array(
            "label" => __("Title", "text_domain"),
            "section" => "sorcey_footer",
            "settings" => "sr_copyright",
            "type" => "text",

        )
    ));

}

add_action('customize_register', 'sorcey_customize_register');

Then chek there will be a 'New Section'

Answer 2

Use below function for add custom field in customize setion,

function custom_register_theme_customizer( $wp_customize ) {

$wp_customize->add_section( 'custom_new_section_featured' , array(
        'title'      => 'Featured & content',
        'description'=> '',
        'priority'   => 94,
    ) );


$wp_customize->add_setting(
            'custom_featured_sliderhd', 'sanitize_callback' == 'esc_url_raw' ,
            array(
                'default'     => false
            )
        );


$wp_customize->add_control(
            new WP_Customize_Control(
                $wp_customize,
                'featured_sliderhd',
                array(
                    'label'      => 'Disable Featured  POSTS',
                    'section'    => 'custom_new_section_featured',
                    'settings'   => 'custom_featured_sliderhd',
                    'type'       => 'checkbox',
                    'priority'   => 1
                )
            )
        );



}
add_action( 'customize_register', 'custom_register_theme_customizer' );

For example I used check box, You can update what you want.