• Skip to primary navigation
  • Skip to main content

Genesis Community

Resources for Genesis WordPress Theme Users

  • Facebook
  • Twitter
  • Slack
  • Wiki
  • Login
You are here: Home / Wikis / Genesis / Full Width Widgetized Homepage

Full Width Widgetized Homepage

functions.php:

// Registers front-page widget areas.
for ( $i = 1; $i <= 4; $i++ ) {
    genesis_register_widget_area(
        array(
            'id'          => "front-page-{$i}",
            'name'        => __( "Front Page {$i}", 'genesis-sample' ),
            'description' => __( "This is the front page {$i} section.", 'genesis-sample' ),
        )
    );
}

front-page.php:

<?php
/**
 * Homepage Template.
 */

add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );
/**
 * Adds attributes from 'entry', since this replaces the main entry.
 *
 * @author Bill Erickson
 * @link http://www.billerickson.net/full-width-landing-pages-in-genesis/
 *
 * @param array $attributes Existing attributes.
 * @return array Amended attributes.
 */
function be_site_inner_attr( $attributes ) {

    // Add a class of 'full' for styling this .site-inner differently.
    $attributes['class'] .= ' full';

    // Add an id of 'genesis-content' for accessible skip links.
    $attributes['id'] = 'genesis-content';

    // Add the attributes from .entry, since this replaces the main entry.
    $attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );

    return $attributes;

}

// Displays header.
get_header();

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

// Displays Footer.
get_footer();

style.css:

/* Front Page with Full-Width Sections
-------------------------------------------- */

.site-inner.full {
    max-width: none;
    padding: 0;
}

.site-inner.full .wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

.site-inner.full .widget-area {
    padding: 50px 0;
}

.site-inner.full .widget-area:nth-child(odd) {
    background-color: rgba(0,0,0,.03);
}

.site-inner.full .widget:last-child {
    margin-bottom: 0;
}
Source: https://sridharkatakam.com/full-width-widgetized-homepage-in-genesis-sample-2-6-0/

Posted by: Sridhar Katakam Category: Genesis Tags: bill erickson

« Add Archive Settings support for CPT
Unregister primary sidebar »

Copyright © 2026 · Genesis Sample on Genesis Framework · WordPress · Log in