Full Width Page Template in Genesis for Beaver Builder

Beaver Builder is a pretty good plugin for easily creating content rows for Pages via drag and drop. In this article I share a modification of code from Front Page Template for Full Width Sections in Genesis tutorial for displaying Pages built with Beaver Builder to appear full width.

Screenshot of my test site’s homepage built with a couple of clicks by selecting one of the templates that Beaver Builder comes shipped with:

Create a file named page_beaver.php in your child theme directory having the following:

// Template Name: Full Width Page

add_filter( 'body_class', 'beaver_body_class' );
/**
 * Adds a css class to the body element
 *
 * @param  array $classes the current body classes
 * @return array $classes modified classes
 */
function beaver_body_class( $classes ) {
	$classes[] = 'fl-builder-full';
	return $classes;
}

/**
 * Add attributes for site-inner element, since we're removing 'content'.
 *
 * @param array $attributes Existing attributes.
 * @return array Amended attributes.
 */
function be_site_inner_attr( $attributes ) {
	// Add the attributes from .entry, since this replaces the main entry
	$attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );
	return $attributes;
}
add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );

// Display Header
get_header();

// Display Content
the_post(); // sets the 'in the loop' property to true.
the_content();

// Display Comments
genesis_get_comments_template();

// Display Footer
get_footer();

Then add this in style.css:

/* Full Width Page
-------------------------------------------- */

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

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

	.fl-builder-full .site-inner {
		padding-left: 0;
		padding-right: 0;
	}

}

To make a static Page in which you are using Beaver Builder go full width, edit that Page and apply Full Width Page Template to it.

If you would like to have a full width front page with Beaver, create a static Page named say, Home and set it as Front page at Settings > Reading.

To use Beaver Builder on all the Pages and make them full width, just rename page_beaver.php to page.php OR alternately add the following in functions.php:

/**
 * Template Redirect
 * Use page_beaver.php for all static Pages.
 */
add_filter( 'template_include', 'custom_page_template', 99 );
function custom_page_template( $template ) {

	if ( is_singular( 'page' ) ) {
		$new_template = locate_template( array( 'page_beaver.php' ) );
		if ( '' != $new_template ) {
			return $new_template ;
		}
	}

	return $template;
}