Left sidebar layout with different width

Hi, i have changed the width of the content and sidebar like that

beans_replace_attribute('beans_primary', 'class', 'uk-width-medium-3-4','uk-width-large-7-10 uk-width-medium-2-3');
  beans_replace_attribute('beans_sidebar_primary', 'class', 'uk-width-medium-1-4','uk-width-large-3-10 uk-width-medium-1-3');

But now i have a problem if i want to use the lesft sidebar layout, as it has pull and push classes which are adapted to the orginal layout width, (3-4 and 1-4), and as they have the same markupid as the right sidebar one, i don't know how to fix that

Hello Alex,

When you have both sidebars enabled, you need to adjust the class attributes. Beans has a layout function that automatically adjusts the class attributes depending upon which layout is selected and which sidebar(s). It's the beans_get_layout_class, which you can view here.

Right now beans_get_layout_class only handles one breakpoint. Hmm, we need to change that...Beans 2.

But for now, there's some magic that needs to happen:

1. You need to know which layout is selected and which sidebars are enabled.
2. Then adjust the widths accordingly.

That sounds like a lot of work. It's not too bad.

Thought Process

Here's the though process of it:

1. Change the default layout from a grid of 4 to 3. Make 3 be the baseline grid layout.
2. Then filter what the beans_get_layout_class() builds to add on the larger width attributes.

How?

Modify Layout Grid from 4 to 3

By default, Beans sets the layout grid to 4. Let's change that to 3:

add_filter( 'beans_layout_grid_settings', 'beans_child_modify_layout_grid_settings' );
/**
 * Modify the default layout grid size from 4 to 3 for the default medium breakpoint.
 *
 * @since 1.0.0
 *
 * @param array $settings Layout settings.
 *
 * @return array
 */
function beans_child_modify_layout_grid_settings( array $settings ) {
  $settings['grid'] = 3;

  return $settings;
}

Now instead of uk-width-medium-1-4, you'll get uk-width-medium-1-3 for the content and sidebars.

Add the Large Widths

Next, we need to add the large widths. Let's use the filter that's at the end of beans_get_layout_class() to add the appropriate uk-width-large-X-10 class attributes for the content and each sidebar.

add_filter( 'beans_layout_class_content', 'beans_child_add_large_width_class' );
/**
 * Add the large width class attribute to the content and sidebars.
 *
 * @since 1.0.0
 *
 * @param string $class The content's class attribute.
 *
 * @return string Returns the content's class attribute.
 */
function beans_child_add_large_width_class( $class ) {
 // Both sidebars are active.
  if ( strpos( $class, 'uk-width-medium-1-3' ) !== false ) {
    $content_width = '6';
   $sidebar_width = '2';
 } else {
    $content_width = '7';
   $sidebar_width = '3';
 }

 beans_replace_attribute( 'beans_sidebar_primary', 'class', 'uk-width-medium-1-3', "uk-width-large-{$sidebar_width}-10 uk-width-medium-1-3" );
 beans_replace_attribute( 'beans_sidebar_secondary', 'class', 'uk-width-medium-1-3', "uk-width-large-{$sidebar_width}-10 uk-width-medium-1-3" );

 return "uk-width-large-{$content_width}-10 {$class}";
}

Wrap

Give it a try. Ask questions. Cheers.

Tonya Mork@ I'm very new learner of "Beans" ... I've a question ... In the code below

add_filter( 'beans_layout_class_content', 'beans_child_add_large_width_class' )

I can see that you've used a filter hook "beans_layout_class_content" ... But in the documentation of "Code Reference" I haven't dound this hook "beans_layout_class_content" ... How shall I know this hook exists ? ... Please give me a reply ... Thanks in advance ...