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

Answer 2

What you're looking to work with is the Theme Customizer in WordPress, which has a unique set of hooks and an API around it.

Get started by working with this hook, the customize_register hook:

https://developer.wordpress.org/reference/hooks/customize_register/

A fairly robust API has been built up around the theme customizer, and you can refer to this manual for documentation when working with it:

https://developer.wordpress.org/themes/advanced-topics/customizer-api/

Answer 3

After looking inside zerif_customizer.js , I discovered that Zerif Lite is adding the widget panel sections to the Theme Customizer via JavaScript.

To do the same in a child theme of Zerif Lite...

In your functions.php file:

function mytheme_customizer_live_preview() {
    wp_enqueue_script( 
        'mytheme-themecustomizer',                                  //Give the script an ID
        get_stylesheet_directory_uri() . '/js/theme-customizer.js', //Point to file
        array( 'jquery' ),                                          //Define dependencies
        true                                                        //Put script in footer?
    );
}
add_action( 'customize_controls_enqueue_scripts', 'mytheme_customizer_live_preview' );

Then put a new JavaScript file in your theme, where the filename and path must match the second parameter from the function above:

jQuery(document).ready(function() {
    /* Move our widgets into the widgets panel */
    wp.customize.bind('ready', function() {
        wp.customize.section( 'sidebar-widgets-sidebar-mysection' ).panel( 'panel_mysection' );
        wp.customize.section( 'sidebar-widgets-sidebar-mysection' ).priority( '2' );
    });
});

Of course, panel_mysection must already exist as per something like this:

$wp_customize->add_panel( 'panel_mysection', array(
    'priority' => 33,
    'capability' => 'edit_theme_options',
    'title' => __( 'Mysection section', 'mytheme' )
));

And the sidebar-mysection widget section must already exist:

class zerif_mysection extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'ctUp-ads-widget',
            __( 'Zerif - Mysection widget', 'zerif-lite' )
        );
    }
}
function mytheme_register_widgets() {
    register_widget('zerif_mysection');
    register_sidebar(
        array (
            'name'          => 'Mysection section widgets',
            'id'            => 'sidebar-mysection',
            'before_widget' => '',
            'after_widget'  => ''
        )
    );
}
add_action('widgets_init', 'mytheme_register_widgets');