WP renders HTML wrong when adding widgets

Here is my code for a footer. Footer element should have div.footer-widgets, nav, and p elements as children. But for some reason wordpress puts everything to div.footer-widget element (I've included the screenshot).

This happens only after adding dynamic_sidebar. What is happening here?

<footer class="site-footer">

    <div class="footer-widgets">
        <p>Child1</p>    
        <p>Child2</p>   
        <?php
            if(is_active_sidebar('footer_1'))
            {
                dynamic_sidebar('footer_1');
            }
        ?>
    </div> <!-- End of footer-widget -->

    <nav class="site-nav">
        <?php 
            $arg = array(
                'theme_location' => 'footer',
                'menu_class' => 'navigation'
            );
        ?>
        <?php wp_nav_menu($args); ?>
    </nav>

    <p><?php bloginfo('name');?> &copy; <?php echo date('Y'); ?></p>
</footer>

<?php wp_footer();?>

</body>
</html>

Also, code for registering a sidebar in functions.php file

function our_widget_init() {

    register_sidebar(array(
    'name'=> 'Footer Area 1',
    'id' => 'footer_1',
    'before_widget' => '<div>',
    'after_widget' => '</div',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
    ));
 }
add_action('widgets_init', 'our_widget_init');

Here is my code for a footer. Footer element should have div.footer-widgets, nav, and p elements as children. But for some reason wordpress puts everything to div.footer-widget element (I've included the screenshot).

This happens only after adding dynamic_sidebar. What is happening here?

<footer class="site-footer">

    <div class="footer-widgets">
        <p>Child1</p>    
        <p>Child2</p>   
        <?php
            if(is_active_sidebar('footer_1'))
            {
                dynamic_sidebar('footer_1');
            }
        ?>
    </div> <!-- End of footer-widget -->

    <nav class="site-nav">
        <?php 
            $arg = array(
                'theme_location' => 'footer',
                'menu_class' => 'navigation'
            );
        ?>
        <?php wp_nav_menu($args); ?>
    </nav>

    <p><?php bloginfo('name');?> &copy; <?php echo date('Y'); ?></p>
</footer>

<?php wp_footer();?>

</body>
</html>

Also, code for registering a sidebar in functions.php file

function our_widget_init() {

    register_sidebar(array(
    'name'=> 'Footer Area 1',
    'id' => 'footer_1',
    'before_widget' => '<div>',
    'after_widget' => '</div',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
    ));
 }
add_action('widgets_init', 'our_widget_init');

• widgets
• html

Share Improve this question edited Jan 24, 2019 at 11:23 zxdmac asked Jan 24, 2019 at 10:11 zxdmaczxdmac 322 bronze badges 2

• What's your code for registering the 'footer_1' sidebar? – Jacob Peattie Commented Jan 24, 2019 at 10:25
• Sorry, added it to the end of the post – zxdmac Commented Jan 24, 2019 at 11:25

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You're missing > in the closing div, for after_widget:

'after_widget' => '</div',

Needs to be:

'after_widget' => '</div>',