Wordpress Theme Customizer - Add area for users to move around and organize widgets

Question

I am currently developing a Wordpress Theme, using the Theme Customizer to let users customize it, but I have got stuck.

For the footer, I have created various widgets, containing different things like Recent Posts, or a Live Twitter Feed.

I want the users to be able to organize them, in the order they want, yet I cannot work out how to do it. I found one other theme (Zerif Lite), that lets you do this (see image below), however I went through all the code and couldn't work out they did it, there was nothing adding the 'Our focus section widgets' section.

I have organized my theme similarly, there are various Panels, with Sections, and I want one of those sections to contain it.

EDIT:

Not everyone seems to get my problem. I KNOW how to create Widgets

I know how to create Widgets. I want an area in the Theme Customizer for users to move them around, not just the ones I created, but also other default ones like the Tag Cloud.

EDIT 2: @Codeartist, I am using Wordpress 4.3.1, and here is my code in functions.php

function widgets_init_mysite() {
    register_sidebar( array(
        'name' => __( 'Main Sidebar', 'twentyeleven' ),
        'id' => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
}

add_action( 'widgets_init', 'widgets_init_mysite' );

function mytheme_customizer( $wp_customize ) {

    $wp_customize->add_panel( 'panel_for_widgets', array(
        'priority'       => 70,
        'title'          => __('Panel for widgets', 'codeartist'),
        'capability'     => 'edit_theme_options',
    ));

    $wp_customize->get_section( 'sidebar-widgets-sidebar-1' )->panel = 'panel_for_widgets';

}

add_action( 'customize_register', 'mytheme_customizer' );

Answer 1

I was experimenting on freshly updated Twenty Eleven theme.

In function.php there were registered some sidebars:

register_sidebar( array(
    'name' => __( 'Main Sidebar', 'twentyeleven' ),
    'id' => 'sidebar-1',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

register_sidebar( array(
    'name' => __( 'Showcase Sidebar', 'twentyeleven' ),
    'id' => 'sidebar-2',
    'description' => __( 'The sidebar for the optional Showcase Template', 'twentyeleven' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

register_sidebar( array(
    'name' => __( 'Footer Area One', 'twentyeleven' ),
    'id' => 'sidebar-3',
    'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

register_sidebar( array(
    'name' => __( 'Footer Area Two', 'twentyeleven' ),
    'id' => 'sidebar-4',
    'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

register_sidebar( array(
    'name' => __( 'Footer Area Three', 'twentyeleven' ),
    'id' => 'sidebar-5',
    'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

Each sidebar have its own unique id. If widgets and sidebars are enabled in your theme, then default 'widgets' panel would be created by Wordpress on customizer screen. Then for each sidebar would be created section placed in 'widgets' panel. That section has id based on sidebar id. And that id looks like this

sidebar-widgets-[sidebar-id]

Where sidebar-id is an id of respective sidebar.

All your code should be placed in functions.php (or inside plugin) in 'customize_register' hook

add_action( 'customize_register', 'codeartist_customize_register' );
function codeartist_customize_register($wp_customize) {
    //Put your code here
}

So, basically, what we need to do is to create new panel

$wp_customize->add_panel( 'panel_for_widgets', array(
    'priority'       => 70,
    'title'          => __('Panel for widgets', 'codeartist'),
    'capability'     => 'edit_theme_options',
));

And then move in that panel all sections which represents sidebars.

$wp_customize->get_section( 'sidebar-widgets-sidebar-1' )->panel = 'panel_for_widgets';
$wp_customize->get_section( 'sidebar-widgets-sidebar-2' )->panel = 'panel_for_widgets';
$wp_customize->get_section( 'sidebar-widgets-sidebar-3' )->panel = 'panel_for_widgets';
$wp_customize->get_section( 'sidebar-widgets-sidebar-4' )->panel = 'panel_for_widgets';
$wp_customize->get_section( 'sidebar-widgets-sidebar-5' )->panel = 'panel_for_widgets';

In Twenty Eleven there are five sidebars, so we move five sections.

Finally, the name of each section is the same as name of respective sidebar. To change description of the section you can do something like this.

$wp_customize->get_section( 'sidebar-widgets-sidebar-1' )->description= __('New description', 'codeartist');

Sadly, there is not much documentation on get_section, but here is the link to codex: https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/get_section