Sridhar Katakam

Genesis and WordPress Tutorials

Simplifying the code for displaying multiple widget areas in Genesis

by 6 Comments

Updated on April 26, 2017

Let’s say you want to display 5 widget areas for the front page. The code for this is something like

genesis_widget_area( 'front-page-1', array(
    'before' => '<div class="front-page-1 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
) );

genesis_widget_area( 'front-page-2', array(
    'before' => '<div class="front-page-2 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
) );

genesis_widget_area( 'front-page-3', array(
    'before' => '<div class="front-page-3 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
) );

genesis_widget_area( 'front-page-4', array(
    'before' => '<div class="front-page-4 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
) );

genesis_widget_area( 'front-page-5', array(
    'before' => '<div class="front-page-5 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
) );

We can simply rewrite the above using a for loop like so:

// Display front-page widget areas.
for ( $i = 1; $i <= 5; $i++ ) {
    genesis_widget_area( "front-page-{$i}", array(
        'before' => '<div class="front-page-' . $i . ' widget-area"><div class="wrap">',
        'after'  => '</div></div>',
    ) );
}

  • This is great Sridhar! Is there a way to achieve something similar when we have two widgets areas wrapped together, for example:

    echo ”;
    genesis_widget_area( ‘front-page-left’, array(
    ‘before’ => ”,
    ‘after’ => ”,
    ) );
    genesis_widget_area( ‘front-page-right’, array(
    ‘before’ => ”,
    ‘after’ => ”,
    ) );
    echo ”;
    ) );

    genesis_widget_area( ‘front-page-2’, array(
    ‘before’ => ”,
    ‘after’ => ”,
    ) );

    genesis_widget_area( ‘front-page-3’, array(
    ‘before’ => ”,
    ‘after’ => ”,
    ) );

    Best,
    Maira

    Reply
    • >