Theme Customizer – Choose where widget area appears, to let users organise widgets

I am creating a theme, and I have a problem with Widgets and Widget Areas. I am using the Theme Customizer to let the user edit the content, colors, etc.

I know how to create a widget area. I need to be able to add that widget area to a specific section in the theme customizer. For example, the zerif-lite theme (as pictured below) has a widget area under the

Our focus section – Panel

Our focus section widgets – Section

I want to the same thing in my theme, be able to choose where in the customizer the widget area is displayed under.

Note: I did look at the code for the zerif-lite, however I could still not work out how they did it.

Also, I know how to create Panels, Sections, Settings and Controls, just not how to create a widget area.

You can move around sections in the customizer simply by accessing the datastructure and assign a different value to the panel. So supposing that your widget area, created in the usual way, is called wpse210938_area and you want to move it to the panel wpse210938_panel, you do this:

add_action( 'customize_register', 'wpse210938_move_widget_area' );
function wpse210938_move_widget_area () {
  global $wp_customize;
  $wp_customize->get_section ('sidebar-widgets-wpse210938_area')->panel="wpse210938_panel";
  }

Only disadvantage is that, if you have debug mode on, you will get a php warning “Creating default object from empty value”, presumably because WP loads the widget sections last, so when you are moving them, they are still empty.