Monday, 11 February 2019

Wordpress Custom Sidebar, Widgets Appearing Outside Aside Tag

I have a custom sidebar in wordpress, and this was the working code in sidebar.php:

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
    return;
}
?>

<aside id="secondary" class="sidebar-area widget-area">
    <div class="sidebar-area-wrap">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </div>
</aside><!-- #secondary -->

I added options to it in the functions.php(works), so now the code looks like this:

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
    return;
}

$swag_sidebar_location = get_theme_mod('swag_sidebar_location');
if (isset($swag_sidebar_location) && $swag_sidebar_location=='') {
$swag_sidebar_location ='sidebar-location-none';
}

?>

<?php

if (isset($swag_sidebar_location) && $swag_sidebar_location=='sidebar-location-right' || $swag_sidebar_location=='sidebar-location-left') {
    echo '
        <aside id="secondary" class="sidebar-area widget-area">
            <div class="sidebar-area-wrap">
                ' . dynamic_sidebar( "sidebar-1" ) . '
            </div>
        </aside>
    ';
}

?>

The problem is the widgets are appearing outside and before the tags, with the number "1" appearing appearing inside the tag.

I'm guessing the problem lies here: ' . dynamic_sidebar( "sidebar-1" ) . ' I don't know php, just trying to figure it out. How can I fix this?

EDIT: an example of what the HTML looks like this:

<section id="pages-2" class="widget">xxxxxx</section>
<section id="pages-2" class="widget">xxxxxx</section>
<section id="pages-2" class="widget">xxxxxx</section>
<section id="pages-2" class="widget">xxxxxx</section>
<aside id="secondary" class="sidebar-area widget-area sidebar-location-right">          <div class="sidebar-area-wrap">             1           </div>      </aside>

Instead of correctly looking like this:

<aside id="secondary" class="sidebar-area widget-area sidebar-location-right">           
    <div class="sidebar-area-wrap">
        <section id="pages-2" class="widget">xxxxxx</section>
        <section id="pages-2" class="widget">xxxxxx</section>
        <section id="pages-2" class="widget">xxxxxx</section>
        <section id="pages-2" class="widget">xxxxxx</section>
    </div>
</aside>

EDIT: as requested, my register sidebar code in functions.php

function swagger_widgets_init()
{
    register_sidebar(array(
        'name' => esc_html__('Sidebar', 'swagger'),
        'id' => 'sidebar-1',
        'description' => esc_html__('Add widgets here.', 'swagger'),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget' => '</section>',
        'before_title' => '<h2 class="widget-title"><span class="widget-title-span">',
        'after_title' => '</span></h2>'
    ));
}
add_action('widgets_init', 'swagger_widgets_init');



from Wordpress Custom Sidebar, Widgets Appearing Outside Aside Tag

No comments:

Post a Comment