How to add 3 widget area in one place

Hey,

I wanted to add three different widget area in one place something like Widget Area 1 | Widget Area 2 | WIdget Area 3.

Does anyboddy know how to do this..??

Hey Anupam,

Here is an example how to add a widget area. You can register and display as many as you want.

See in the example it uses the beans_main_grid_before_markup hook so it displays it before the main grid but you can display it where ever you want.

If you need help with the code, please let us know if you want grid or stack widget areas and where do you want it on the page (which markup id).

Thanks,

Hey Thierry,

Actually i know how to add widgets but i'm not able to add three of them in one place. i want to do somting like this

1st widget area | 2nd widget area | 3rd widget area

Hey Anupam,

Before I put a snippet together, I would like to make sure I understand well what you want to achieve. You want to output 3 widget areas (widgets stacked) in a grid of 3 columns, right? If yes, where to you like to have it on the page?

Thanks,

Hey thierry

Yeah that's what i want to know, and i want to add it in the footer section.

Here is the snippet I would suggest to use which can be attapted to your needs:

add_action( 'widgets_init', 'example_widgets_init' );

function example_widgets_init() {

 // Create 3 widget area.
  for( $i = 1; $i <= 3; $i++ ) {
    beans_register_widget_area( array(
      'name' => "Widget Area {$i}",
     'id' => "example_widget_area_{$i}",
   ) );
  }

}

// Output widget area above the footer.
add_action( 'beans_footer_before_markup', 'example_footer_widget_area' );

function example_footer_widget_area() {

 ?>
  <div class="example-footer uk-block">
   <div class="uk-container uk-container-center">
      <div class="uk-grid uk-grid-width-medium-1-3" data-uk-grid-margin>
        <?php for( $i = 1; $i <= 3; $i++ ) : ?>
         <div><?php echo beans_widget_area( "example_widget_area_{$i}" ); ?></div>
       <?php endfor; ?>
      </div>
    </div>
  </div>
  <?php

}

Happy coding,

Hey Thierry,

Thanks for the code it worked like a charm.