How to apply full width post attributes in all custom post type?

There have no post attributes option for custom post type in Beaver Builder theme. In this tutorial I am sharing the steps for it.
Step 1: Adds Post Attributes in all custom post
Open the functions.php file of your beaver builder child theme and add this snippet
Adding Post Attributes in all post types
/**
* Adding Post Attributes in all post types
*/
add_action( 'init', function(){
$cpts = get_post_types( array( 'public' => true, '_builtin' => false ) );
if( $cpts )
{
foreach( $cpts as $cpt )
{
if( ! in_array( $cpt, array( 'fl-builder-template', 'fl-theme-layout' ) ) )
{
add_filter( "theme_{$cpt}_templates", 'wpbw_cpt_post_attributes', 99 );
add_post_type_support( $cpt, 'page-attributes' );
}
}
}
}, 99 );
function wpbw_cpt_post_attributes( $post_templates )
{
$post_templates['sidebar-left'] = __( 'Left Sidebar', 'fl-automator' );
$post_templates['sidebar-right'] = __( 'Right Sidebar', 'fl-automator' );
$post_templates['full-width'] = __( 'Full Width Content', 'fl-automator' );
$post_templates['no-header-footer'] = __( 'No Header/Footer', 'fl-automator' );
return $post_templates;
}
add_action( 'wp_head', 'wpbw_cpt_layout' );
function wpbw_cpt_layout()
{
$tpl_attr = get_post_meta( get_the_ID(), '_wp_page_template', true );
if( empty( $tpl_attr ) )
return;
if( $tpl_attr === 'no-header-footer' ) {
add_filter( 'fl_topbar_enabled', '__return_false' );
add_filter( 'fl_fixed_header_enabled', '__return_false' );
add_filter( 'fl_header_enabled', '__return_false' );
add_filter( 'fl_footer_enabled', '__return_false' );
}
if( $tpl_attr === 'sidebar-right' )
{
add_filter( 'fl_theme_mods', 'wpbw_cpt_layout_sidebar_right', 99 );
}
if( $tpl_attr === 'sidebar-left' )
{
add_filter( 'fl_theme_mods', 'wpbw_cpt_layout_sidebar_left', 99 );
}
if( $tpl_attr === 'full-width' )
{
add_filter( 'fl_theme_mods', 'wpbw_cpt_layout_full_width', 99 );
}
}
function wpbw_cpt_layout_sidebar_left( $mods )
{
$mods['fl-blog-layout'] = 'sidebar-left';
if( get_post_type() == 'product' )
$mods['fl-woo-layout'] = 'sidebar-left';
return $mods;
}
function wpbw_cpt_layout_sidebar_right( $mods )
{
$mods['fl-blog-layout'] = 'sidebar-right';
if( get_post_type() == 'product' )
$mods['fl-woo-layout'] = 'sidebar-right';
return $mods;
}
function wpbw_cpt_layout_full_width( $mods )
{
$mods['fl-blog-layout'] = 'full-width';
if( get_post_type() == 'product' )
$mods['fl-woo-layout'] = 'full-width';
return $mods;
}
Step 2: Adds custom css for full width layout
Open the style.css file and add this CSS
Full Width for Beaver Page Builder
.fl-builder.fl-full-width .container {
padding-left: 0;
padding-right: 0;
max-width: 100%;
width: auto;
}
.fl-builder.fl-full-width .container > .row,
.fl-builder.fl-full-width .container .fl-content {
margin: 0;
padding: 0;
}
Now add/edit any post type and select the correct layout from template drop down list under post attribute section. Publish/Update the post and see the output at front end.
Post Attributes for Portfolio Post Type
Welcome for any comment.
Posted in Beaver Builder