Lego2012
12/13/2016 - 4:42 PM

Multi-Column widget areas

Multi-Column widget areas

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

<!-- 2-Columns 50% – 50% -->

genesis_register_sidebar( array(
    'id'            => 'home-featured-left',
    'name'          => 'Home Featured Left',
    'description'   => 'This is the Home Featured Left section'
) );
genesis_register_sidebar( array(
    'id'            => 'home-featured-right',
    'name'          => 'Home Featured Right',
    'description'   => 'This is the Home Featured Right section'
) );

add_action( 'genesis_after_header', 'sk_home_featured' );
function sk_home_featured() {

    if ( is_home() || is_front_page() ) {
        echo '<div class="home-featured"><div class="wrap">';

        genesis_widget_area( 'home-featured-left', array(
            'before'    => '<div class="home-featured-left widget-area one-half first">',
            'after'     => '</div>',
        ) );

        genesis_widget_area( 'home-featured-right', array(
            'before'    => '<div class="home-featured-right widget-area one-half">',
            'after'     => '</div>',
        ) );

        echo '</div></div>';
    }

}

.home-featured {
    margin-top: 40px;
}

@media only screen and (max-width: 800px) {

    .home-featured-left {
        margin-bottom: 40px;
    }

}

<!-- 2-Columns 75% – 25% -->

genesis_register_sidebar( array(
    'id'            => 'home-featured-left',
    'name'          => 'Home Featured Left',
    'description'   => 'This is the Home Featured Left section'
) );
genesis_register_sidebar( array(
    'id'            => 'home-featured-right',
    'name'          => 'Home Featured Right',
    'description'   => 'This is the Home Featured Right section'
) );

add_action( 'genesis_after_header', 'sk_home_featured' );
function sk_home_featured() {

    if ( is_home() || is_front_page() ) {
        echo '<div class="home-featured"><div class="wrap">';

        genesis_widget_area( 'home-featured-left', array(
            'before'    => '<div class="home-featured-left widget-area two-thirds first">',
            'after'     => '</div>',
        ) );

        genesis_widget_area( 'home-featured-right', array(
            'before'    => '<div class="home-featured-right widget-area one-third">',
            'after'     => '</div>',
        ) );

        echo '</div></div>';
    }

}

.home-featured {
    margin-top: 40px;
}

@media only screen and (max-width: 800px) {

    .home-featured-left {
        margin-bottom: 40px;
    }

}

<!-- 2-Columns 25% – 75% -->

genesis_register_sidebar( array(
    'id'            => 'home-featured-left',
    'name'          => 'Home Featured Left',
    'description'   => 'This is the Home Featured Left section'
) );
genesis_register_sidebar( array(
    'id'            => 'home-featured-right',
    'name'          => 'Home Featured Right',
    'description'   => 'This is the Home Featured Right section'
) );

add_action( 'genesis_after_header', 'sk_home_featured' );
function sk_home_featured() {

    if ( is_home() || is_front_page() ) {
        echo '<div class="home-featured"><div class="wrap">';

        genesis_widget_area( 'home-featured-left', array(
            'before'    => '<div class="home-featured-left widget-area one-third first">',
            'after'     => '</div>',
        ) );

        genesis_widget_area( 'home-featured-right', array(
            'before'    => '<div class="home-featured-right widget-area two-thirds">',
            'after'     => '</div>',
        ) );

        echo '</div></div>';
    }

}

.home-featured {
    margin-top: 40px;
}

@media only screen and (max-width: 800px) {

    .home-featured-left {
        margin-bottom: 40px;
    }

}

<!-- 3-Columns 1/3rd – 1/3rd – 1/3rd -->

genesis_register_sidebar( array(
    'id'            => 'home-featured-left',
    'name'          => 'Home Featured Left',
    'description'   => 'This is the Home Featured Left section'
) );
genesis_register_sidebar( array(
    'id'            => 'home-featured-middle',
    'name'          => 'Home Featured Middle',
    'description'   => 'This is the Home Featured Middle section'
) );
genesis_register_sidebar( array(
    'id'            => 'home-featured-right',
    'name'          => 'Home Featured Right',
    'description'   => 'This is the Home Featured Right section'
) );

add_action( 'genesis_after_header', 'sk_home_featured' );
function sk_home_featured() {

    if ( is_home() || is_front_page() ) {
        echo '<div class="home-featured"><div class="wrap">';

        genesis_widget_area( 'home-featured-left', array(
            'before'    => '<div class="home-featured-left widget-area one-third first">',
            'after'     => '</div>',
        ) );

        genesis_widget_area( 'home-featured-middle', array(
            'before'    => '<div class="home-featured-middle widget-area one-third">',
            'after'     => '</div>',
        ) );

        genesis_widget_area( 'home-featured-right', array(
            'before'    => '<div class="home-featured-right widget-area one-third">',
            'after'     => '</div>',
        ) );

        echo '</div></div>';
    }

}

.home-featured {
    margin-top: 40px;
}

@media only screen and (max-width: 800px) {

    .home-featured-left, .home-featured-middle {
        margin-bottom: 40px;
    }

}

<!-- 4-Columns 25% – 25% – 25% – 25% -->

genesis_register_sidebar( array(
    'id'            => 'home-featured-left',
    'name'          => 'Home Featured Left',
    'description'   => 'This is the Home Featured Left section'
) );
genesis_register_sidebar( array(
    'id'            => 'home-featured-middle-1',
    'name'          => 'Home Featured Middle 1',
    'description'   => 'This is the Home Featured Middle section'
) );
genesis_register_sidebar( array(
    'id'            => 'home-featured-middle-2',
    'name'          => 'Home Featured Middle 2',
    'description'   => 'This is the Home Featured Right section'
) );
genesis_register_sidebar( array(
    'id'            => 'home-featured-right',
    'name'          => 'Home Featured Right',
    'description'   => 'This is the Home Featured Right section'
) );

add_action( 'genesis_after_header', 'sk_home_featured' );
function sk_home_featured() {

    if ( is_home() || is_front_page() ) {
        echo '<div class="home-featured"><div class="wrap">';

        genesis_widget_area( 'home-featured-left', array(
            'before'    => '<div class="home-featured-left widget-area one-fourth first">',
            'after'     => '</div>',
        ) );

        genesis_widget_area( 'home-featured-middle-1', array(
            'before'    => '<div class="home-featured-middle-1 widget-area one-fourth">',
            'after'     => '</div>',
        ) );

        genesis_widget_area( 'home-featured-middle-2', array(
            'before'    => '<div class="home-featured-middle-2 widget-area one-fourth">',
            'after'     => '</div>',
        ) );

        genesis_widget_area( 'home-featured-right', array(
            'before'    => '<div class="home-featured-right widget-area one-fourth">',
            'after'     => '</div>',
        ) );

        echo '</div></div>';
    }

}

.home-featured {
    margin-top: 40px;
}

@media only screen and (max-width: 800px) {

    .home-featured .widget-area {
        margin-bottom: 40px;
    }
    .home-featured .widget-area:last-child {
        margin-bottom: 0;
    }

}