How i can get widgets areas working in customizer?

by

I’m encountering a strange issue with WordPress. I’m building a theme and the theme customization is driven by Customizer.

So, basically in functions.php I’m adding

add_theme_support( 'widget-customizer' );

i’m registering a sidebar with:

register_sidebar( array(
   'name' => __( 'Test Sidebar' ),
   'id' => 'test-sidebar',
));

then in index.php i’m adding the common get_footer(); and in footer.php I have:

<?php if ( is_active_sidebar( 'test-sidebar' ) ): ?>
    <div id="test-sidebar" class="sidebar">
        <?php dynamic_sidebar( 'test-sidebar' ); ?>
    </div>
<?php endif; ?>

Now the first strange issue is that in the preview window I can see any widget added via admin page in Appearance but in the customizer widget section I can’t see any area and I get this message

There are no widget areas currently rendered in the preview. Navigate
in the preview to a template that makes use of a widget area in order
to access its widgets here.

But the second strange issue is that if in my functions.php I add:

   add_action( 'wp_footer', function () {
       ?>
       <?php if ( is_active_sidebar( 'test-sidebar' ) ): ?>
            <div id="test-sidebar" class="sidebar">
            <?php dynamic_sidebar( 'test-sidebar' ); ?>
        </div>
        <?php endif; ?>
        <?php
    } );

Now I can see the widget area in customizer.

What could be the problem?

2 Answers
2

After a entire night I’ve get the answer.
Reflecting on why the customizer showing me the widget areas only through the wp_footer hook I have checked my footer.php and the problem was that wp_footer() were called before the sidebar section.

   /* Always have wp_footer() just before the closing </body>
    * tag of your theme, or you will break many plugins, which
    * generally use this hook to reference JavaScript files.
    */
    wp_footer();

Moving it after sidebars all works perfectly.

Leave a Comment