Force layout with custom sidebar

Hi, as you suggested in another thread I'm opening this one to discuss on managing sidebars configurations.

I already forced the layout with primary sidebar with this function:

function beans_child_view_force_layout( $args ) {
 return 'c_sp';
}
add_filter( 'beans_layout', 'beans_child_view_force_layout' );

What I need now is to force this behaviour in the single.php wordpress native template and replace the 'sp' sidebar with a custom one I've already registered in functions.php. Is there also the possibility to define different configurations with more then one custom sidebar (e.g. c_c1_c2; c1_c_c3_c2; etc.)?

Thank you for your support!

Hey Vic,

Here is the example to force and replace the primary sidebar for single views. In your child theme functions.php, register your widget area with the code below (which you have done but it may be useful to others):

add_action( 'widgets_init', 'beans_child_register_widget_areas' );

/**
 * Register the widget areas (sidebars).
 */
function beans_child_register_widget_areas() {

  beans_register_widget_area( array(
    'name' => 'Custom Sidebar',
   'id' => 'custom_sidebar'
  ) );

}

Then you create your single.php file in your child theme and add the following code:

<?php

add_filter( 'beans_layout', 'beans_child_view_force_layout' );

/**
 * Force layout to Content / Sidebar Primary.
 */
function beans_child_view_force_layout() {

 return 'c_sp';

}

beans_modify_action_callback( 'beans_widget_area_sidebar_primary', 'beans_child_view_widget_area_sidebar' );

/**
 * Replace sidebar_primary widget area with custom_sidebar.
 */
function beans_child_view_widget_area_sidebar() {

 echo beans_widget_area( 'custom_sidebar' );

}

// Load the document which is always needed at the bottom of page templates.
beans_load_document();

Fully Custom Layouts

You also ask how to take it further and add fully custom layouts. In the example below, I tried to be as versatile as possible to illustrate how you can achieve it. A few notes about it:

• It is meant to be added to your child themes functions.php. If you want to keep it clean, you may add a includes/layouts.php folder/file and add require_once( get_stylesheet_directory() . '/includes/layouts.php' ); in your functions.php
• The beans_child_layout_options() adds the layout options in the admin but you are not forced to do so, you may remove it and control the layouts in your template files as per the snippet you pasted in your question, just using your new layout ids instead of c_sp
• In beans_child_layout_options() custom layout options, I have added text labels but you may add a url to your layout image and it will automatically do the rest for you.

add_filter( 'beans_layouts', 'beans_child_layout_options' );

/**
 * Add the layouts to the admin options.
 */
function beans_child_layout_options( $layouts ) {

  $layouts['c_sa'] = __( 'Content | Sidebar A', 'beans-child' ); // You may add a url to your layout image instead of text.
 $layouts['c_sb'] = __( 'Content | Sidebar B', 'beans-child' ); // You may add a url to your layout image instead of text.
 $layouts['sa_c_sb'] = __( 'Sidebar A | Content | Sidebar B', 'beans-child' ); // You may add a url to your layout image instead of text.

  // You may also unset layouts here if intented.

 return $layouts;

}

add_action( 'widgets_init', 'beans_child_register_widget_areas' );

/**
 * Register the widget areas (sidebars).
 */
function beans_child_register_widget_areas() {

 beans_register_widget_area( array(
    'name' => 'Sidebar A',
    'id' => 'sidebar_a'
 ) );

  beans_register_widget_area( array(
    'name' => 'Sidebar B',
    'id' => 'sidebar_b'
 ) );

}

add_action( 'wp', 'beans_child_setup_document' );

/**
 * Setup the document.
 */
function beans_child_setup_document() {

 // Change the primary grid class according to our new layout.
 if ( in_array( beans_get_layout(), array( 'c_sa','c_sb' ) ) )
   beans_replace_attribute( 'beans_primary', 'class', 'uk-width-medium-4-4', 'uk-width-medium-3-4' );

  elseif ( beans_get_layout() === 'sa_c_sb' )
   beans_replace_attribute( 'beans_primary', 'class', 'uk-width-medium-4-4', 'uk-width-medium-2-4 uk-push-1-4' );

}

add_action( 'beans_primary_after_markup', 'beans_child_widget_areas' );

/**
 * Display the widget areas according to the selected layout.
 */
function beans_child_widget_areas() {

  $current = beans_get_layout();
  $ids = array();

 // Sidebar A possible layouts.
  if ( $current === 'c_sa' && beans_has_widget_area( 'sidebar_a' ) )
    $ids['sidebar_a'] = 'uk-width-1-4';

 elseif( $current === 'sa_c_sb' && beans_has_widget_area( 'sidebar_a' ) )
    $ids['sidebar_a'] = 'uk-width-medium-1-4 uk-pull-2-4';

  // Sidebar B possible layouts.
  if ( stripos( $current, 'c_sb' ) !== false && beans_has_widget_area( 'sidebar_b' ) )
    $ids['sidebar_b'] = 'uk-width-1-4';

 // Didplay set sidebars.
  foreach ( $ids as $id => $class ) {

   ?>
    <aside class="<?php esc_attr_e( $class ); ?>" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
      <?php echo beans_widget_area( $id ); ?>
   </aside>
    <?php

 }

}

This is just and example adding sidebars but your imagination is the limit, you may build much more advance layouts 🙂 Let me know if anything isn't clear.

Thanks,

WOW!!! That's absolutely great!

Considering the huge amount of possibilities this snippet produces I think I will try to get only the most urgent functionalities for now and I will take some time to practice everything else later. I'll let you know if there's something I need better explanations for.

Thank you as always!