Best way to render widgets via front-end

Hi there,

I have a question related to bean render widget.

Example code I found via another topic

add_action( 'widgets_init', 'example_widgets_init' );

function example_widgets_init() {

    // Create 3 widget area.
    for( $i = 1; $i <= 4; $i++ ) {
        beans_register_widget_area( array(
            'name' => "Footer Area {$i}",
            'id' => "footer_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="footer uk-block">
        <div class="uk-container uk-container-center">
            <div class="uk-grid uk-grid-width-medium-1-4" data-uk-grid-margin>
                <?php for( $i = 1; $i <= 4; $i++ ) : ?>
                    <div><?php echo beans_widget_area( "footer_widget_area_{$i}" ); ?></div>
                <?php endfor; ?>
            </div>
        </div>
    </div>
    <?php

}

You can see the result via front-end here https://imgur.com/a/AIxLw

As you can see, I didn't assign any content to footer widget but the "html" makeup still show up via front-end. Is there a better way to optimize the widget render code?

I want nothing show up if I didn't assign any content for the widget. The html code appear only if I assign the content to widget position (footer widget area)

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 🙂