Best way to render widgets via front-end

Hi Tony,

It's your code that appears in browser, not from the function beans_widget_area().

Not tested it, but this code should do the work:

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

function example_footer_widget_area() {

  $output = '';
 for( $i = 1; $i <= 4; $i++ ) {
      // get widgets content.
     $widgets = beans_widget_area( "footer_widget_area_{$i}" );

        // Check if it is empty.
      if ( empty( $widgets ) ) {
            continue; // skip if true.
        }

        $output .= '<div class="uk-width-medium-1-4">' . $widgets . '</div>';
    }

    if ( ! empty( $output ) ) :
      ?>
        <div class="footer uk-block">
         <div class="uk-container uk-container-center">
              <div class="uk-grid">
               <?php echo $output; ?>
                </div>
            </div>
        </div>
        <?php
 endif;

}

Edited:

To create 3 widgets area change loop fromfor( $i = 1; $i <= 4; $i++ ) to for( $i = 1; $i < 4; $i++ ), and the width class to uk-width-medium-1-3.

Thank you Joseph, its working 🙂