Genesis Sample Theme Full-Width Template

July 7, 2019

Gokul Deepak S

Front-page.php

<?php
// Template Name: Full Width
add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );
/**
 * Adds the 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 ) {
    // Adds a class of 'full-width' for styling this .site-inner differently
    $attributes['class'] .= ' full-width';
    // Adds an id of 'genesis-content' for accessible skip links
    $attributes['id'] = 'genesis-content';
    // Adds 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();
genesis_do_breadcrumbs();
// Displays content.
the_post(); // sets the 'in the loop' property to true. Needed for Beaver Builder but not Elementor.
the_content();
// Displays comments (if any are already present and if comments are enabled in Genesis settings - disabled by default for Pages.
genesis_get_comments_template();
// Displays footer.
get_footer();

Style.css

/* Full Width Page
------------------------------------------------------ */
.site-inner.full-width {
    max-width: none;
    padding: 0;
    margin: 0;
}

About the author

Gokul Deepak is a DevOps engineer focused on building reliable cloud systems through automation, observability, and disciplined infrastructure design. He shares practical insights from real-world production environments, helping engineers build systems that scale with clarity and confidence.

Leave a Reply

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments