Forcefully Creating a Full Width Layout

Beaver Builder Theme have no extra layout settings option for individual post details page. Using manual code you can make a full width blog layout. You will add the code in your child theme’s functions.php file.

This code will work on whole site pages (like blog, archive, author, category, tags, search etc pages):

Global Option – Full Width Blog Layout

//* Force Fully Creating Full Width Blog Layout
add_filter( 'fl_theme_mods', 'bbt_full_width_blog_layout' );
function bbt_full_width_blog_layout( $mods ) {
    $mods['fl-blog-layout'] = 'full-width';
    $mods['fl-blog-sidebar-size'] = 0;
  
  return $mods;
}

How to target specific page

Using conditional tags you can target a specific blog page. If you have gallery category and its ID is 4 then you can try following snippet:

Full Width Gallery Page Layout

//* Force Fully Creating Full Width Gallery Page
add_filter( 'fl_theme_mods', 'bbt_full_width_layout_gallery' );
function bbt_full_width_layout_gallery( $mods ) {
  if( is_category( 4 ) ) {
    $mods['fl-blog-layout'] = 'full-width';
    $mods['fl-blog-sidebar-size'] = 0;
  }

  return $mods;
}

Above code will only target the “gallery” category page. There have lot of conditional tags like:

  • is_archive() – It will target all archive pages like category, tags, date, month etc
  • is_category() – Target all category archive pages. For individual category page you will use is_category(YOUR CATEGORY ID HERE)
  • is_date() – Target date archive page
  • is_month() – Target month archive page
  • is_home() – Home or Blog listing page
  • is_singular( ‘post’ ) – Target all single post details page
  • is_single( 29 ) – Target specific post (whose ID is 29) details page

How to create a full width custom template

If you are creating a custom template for your blog list page then you will add this code in your custom template file:

Full Width Blog Template Layout

//* Force Fully Creating Full Width Blog Layout
add_filter( 'fl_theme_mods', 'bbt_full_width_template' );
function bbt_full_width_template( $mods ) {
    $mods['fl-blog-layout'] = 'full-width';
    $mods['fl-blog-sidebar-size'] = 0;
  
  return $mods;
}
Posted in