How can I put multiple sidebars in different areas of my template in WordPress

Question

I have created a custom theme and a very basic layout for my WordPress (4.7) application which looks like this:

In my functions.php file I have registered a few sidebars.

function flowershouse_widgets_init(){
        register_sidebar(array(
            'name' => __('Main content left', 'flowershouse'),
            'id' => 'content-main-left',
            'description' => __('Add widgets to appear in left column of main content area', 'flowershouse'),
            'before_widget' => '<div>',
            'after_widget' => '</div>',
            'before_title' => '<h2>',
            'after_title' => '</h2>'
        ));

        register_sidebar(array(
            'name' => __('Main content right', 'flowershouse'),
            'id' => 'content-main-right',
            'description' => __('Add widgets to appear in right column of main content area', 'flowershouse'),
            'before_widget' => '<div>',
            'after_widget' => '</div>',
            'before_title' => '<h2>',
            'after_title' => '</h2>'
        ));

        register_sidebar(array(
            'name' => __('Sidebar', 'flowershouse'),
            'id' => 'sidebar-1',
            'description' => __('Add widgets here to appear in sidebar', 'flowershouse'),
            'before_widget' => '<section id="%1$s" class="%2$s">',
            'after_widget' => '</section>',
            'before_title' => '<h2 class="widget-title">',
            'after_title' => '</h2>'
        ));

        register_sidebar(array(
            'name' => __('Footer Left', 'flowershouse'),
            'id' => 'footer-left',
            'description' => __('Add widgets to appear in left footer', 'flowershouse'),
            'before_widget' => '<div>',
            'after_widget' => '</div>',
            'before_title' => '<h2>',
            'after_title' => '</h2>'
        ));

        register_sidebar(array(
            'name' => __('Footer Middle', 'flowershouse'),
            'id' => 'footer-middle',
            'description' => __('Add widgets here to appear in middle footer column', 'flowershouse'),
            'before_widget' => '<div>',
            'after_widget' => '</div>',
            'before_title' => '<h2>',
            'after_title' => '</h2>'
        ));

        register_sidebar(array(
            'name' => __('Footer Right', 'flowershouse'),
            'id' => 'footer_right',
            'description' => __('Add widgets here to appear in Right footer column', 'flowershouse'),
            'before_widget' => '<div>',
            'after_widget' => '</div>',
            'before_title' => '<h2>',
            'after_widget' => '<h2>'
        ));
    }

    add_action('widgets_init', 'flowershouse_widgets_init');

All registered sidebars are available under Appearance > Widgets page. In sidebar.php file I have this:

if (is_active_sidebar( 'sidebar-1' )) {
    dynamic_sidebar( 'sidebar-1' );
}
if (is_active_sidebar('content-main-left')){
    dynamic_sidebar('content-main-left');
}

I put Search widget under sidebar-1 and put Meta under content-main-left sidebar. But when the page renders both the widgets are being shown under the same sidebar. This is how my index.php looks like:

...
    <div class="row margin-t20">
            <div class="col-md-9 col-sm-9 col-xs-12">
                <div class="box box-gray padd-10-all">
                    Left column with 9 column
                    <div class="row margin-t10">
                        <div class="col-md-3 col-sm-3 col-xs-12">
                            <div class="box box-white padd-10-all">
<!-- Here I want 'content-main-left' sidebar widgets to render -->
                                <?php get_sidebar('content-main-left'); ?>
                            </div>
                        </div>
                        <div class="col-md-9 col-sm-9 col-xs-12 mobile-v-space">
                            <div class="box box-white padd-10-all">
                                Right content<br />(inside 9-column left column)
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-12 mobile-v-space">
                <div class="box box-white padd-10-all">
<!-- Here I want 'sidebar-1' sidebar widgets to render -->
                    <?php get_sidebar('sidebar-1'); ?>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    ...

What I am doing wrong?

Answer 1

Problem Its include whole file at once.that why it include all sidebar in same block.

Case 1 : Direct call a sidebar (Working Properly)

   <div class="row margin-t20">
        <div class="col-md-9 col-sm-9 col-xs-12">
            <div class="box box-gray padd-10-all">
                Left column with 9 column
                <div class="row margin-t10">
                    <div class="col-md-3 col-sm-3 col-xs-12">
                        <div class="box box-white padd-10-all">
                            <?php if (is_active_sidebar('content-main-left')){dynamic_sidebar('content-main-left');} ?>
                        </div>
                    </div>
                    <div class="col-md-9 col-sm-9 col-xs-12 mobile-v-space">
                        <div class="box box-white padd-10-all">
                            Right content<br />(inside 9-column left column)
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <!-- Right Side bar -->
        <div class="col-md-3 col-sm-3 col-xs-12 mobile-v-space">
            <div class="box box-white padd-10-all">
                <?php if (is_active_sidebar('fw_sidebar')){dynamic_sidebar('fw_sidebar');} ?>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

Case 2 : Create file and call

create two files and add code of sidebar.i.e. I have a two sidebar called sidebar-1 and sidebar-2.Now I create a file for that with slug name.

file name : sidebar-1.php

if (is_active_sidebar( 'fw_sidebar' )) {
      dynamic_sidebar( 'fw_sidebar' );
  }

file name : sidebar-2.php

if (is_active_sidebar('content-main-left')){
dynamic_sidebar('content-main-left');
}

while call this sidebar just call function get_sidebar(slugname). for example,

 <?php get_sidebar(1); ?>
 <?php get_sidebar(2); ?>