WordPress Theme Customizer – Add area for users to move around and organize widgets

3 comments

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

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/

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');
   

Comments are closed.