Wordpress custom theme: Widget area not configurable in Customizer

Question

I am currently developing a custom wordpress theme for my own website to use. My main concern is to include widget areas. I managed to include a widget area so that it is configurable from Appearance > Widgets and the result also shows up in the customizer preview and on the live website. The only problem is that I am not able to configure the widgets from within the customizer. When I click on Widgets in the customizer, it only shows this message:

Your theme has a widget area, but this particular page doesn’t display it. You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages.

Well, since the under Appearance > Widgets configured widget is actually showing, my site seems to have a widget area. But I guess something is missing for the customizer to know that.

Here is the code registering the sidebar / widget area that I took from many similar tutorials:

<?php
function tgf_customize_register( $wp_customize ) {
    //All our sections, settings, and controls will be added here
}
add_action( 'customize_register', 'tgf_customize_register' );
function tgf_widgets_init() {
    register_sidebar(array(
        'name'          => 'Sidebar Widget',
        'id'            => 'main_sidebar_widget',
        'description'   => 'Widget Area',
        'before_widget' => '<div class=”widget”>',
        'after_widget'  => '</div>',
        'before_title'  => '<h2>',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'tgf_widgets_init' );
?>

This is the code displaying the sidebar:

<?php if ( is_active_sidebar( 'main_sidebar_widget' ) ) : ?>
    <?php dynamic_sidebar( 'main_sidebar_widget' ); ?>
<?php endif; ?>

I also tried showing it with this code, but then the widget doesn't show on the site at all, even when I configure it from Appearance > Widgets:

<?php if ( is_active_sidebar( 'main_sidebar_widget' ) ) : ?>
    <?php get_sidebar( 'main_sidebar_widget' ); ?>
<?php endif; ?>

Why can't I configure this widget from within the customizer?

This question WordPress theme creation : There are no widget areas on the page shown mentions the same error message in the customizer, but does not provide a solution that applies to my specific problem.

Since I couldn't find anything by researching this problem, I think I am missing something fundamental. Which could very well be, since I'm new to wordpress theme development and PHP. Thanks in advance!

Nanella Nanella · Accepted Answer · 2018-06-11T17:17:13

Found out myself what none of the tutorials told me:

I have to add <?php wp_head() ?> at the start of the page and <?php wp_footer() ?> at the end of the page.

Wordpress seems to need these hooks in order to function properly.

Wordpress custom theme: Widget area not configurable in Customizer

1 Answers