Change Widget Grid Size

Hello,

how to change grid size for a custom widget area?

Created a new widget area with type "grid". Every widget will get a class "uk-width-medium-1-{count}". How to change that class so that every widget will be 1/4 for example?

This widget area will be full width on the start page. Best would be to give different widgets different sizes in a Dynamic Grid. Any ideas how to achive this with beans? 🙂 Maybe reuse the widget to save the custom classes?

Thanks.

Hi Andreas and welcome to the forum.

As you correctly said, the widget area grid is dynamic according to the number of widgets assigned. You can indeed change that using the Beans HTML API markup control (see more in this article).

I don't know what is your widget area id and widgets assigned are but I am going to take this code as an example.

I have added a Search, a Text and a Calendar widget and so my markup ID foreach grid item are as follow respectively:

1. beans_widget_grid[_hero][_search][_search-2]
2. beans_widget_grid[_hero][_text][_text-2]
3. beans_widget_grid[_hero][_calendar][_calendar-3]

For those who are not sure where to find the markup IDs, refer to this article (also mentioned above).

We have lots of things we can work with here. If you want to understand in details what are Beans sub-filters (in square brackets), see this article as it is pretty cool (a bit complex though).

Let's get down to business. If you want to set a 1/4 grid column for all items, you would target them all using beans_widget_grid[_hero] as follow:

beans_replace_attribute( 'beans_widget_grid[_hero]', 'class', 'uk-width-medium-1-4' );

If you wanted to target them individually with various width, then you should use their ids as such:

beans_replace_attribute( 'beans_widget_grid[_search-2]', 'class', 'uk-width-medium-2-10' );
beans_replace_attribute( 'beans_widget_grid[_text-2]', 'class', 'uk-width-medium-3-10' );
beans_replace_attribute( 'beans_widget_grid[_calendar-3]', 'class', 'uk-width-medium-5-10' );

You could take it further and change the breakpoints and much more if you want 🙂

Please don't hesitate to ask if anything isn't clear!

Happy coding,

Wow cool! You can use the subfilters separately. 🙂

And is there a way to get the widget data (e.g. the title) and use this as the class name? Something like this?

page-start.php:

<?php

/*
Template Name: Start
*/

add_action( 'beans_post_content_after_markup', 'my_start_widget_area' );

function my_start_widget_area() {
  //asume we have $widget_title and $widget_id

  list( $widget_title, $classes ) = explode( "|", $widget_title );

    // default classes
    if (empty($classes)) $classes = 'uk-width-medium-1-4';

  beans_replace_attribute( 'beans_widget_grid[_'.$widget_id.']', 'class', $classes );

    echo beans_widget_area( 'start' );
}

beans_load_document();

I don't think adding class in the title is a very elegant way but if you do so, I think the best would be to have mini shortcode type such as {class: uk-width-medium-1-1}. I think this is the code you are after:

add_filter( 'beans_widget_grid[_hero]_attributes', 'example_widget_grid_attributes' );

function example_widget_grid_attributes( $attributes ) {

  preg_match( '/{class: (.*)}/', beans_get_widget( 'title' ), $match );

 // Replace attribute class if set in the title.
 if ( $class = beans_get( 1, $match ) ) {
    $attributes['class'] = $class;
  }

 return $attributes;

}

add_filter( 'beans_widget_title_text_output', 'example_widget_title' );

function example_widget_title( $title ) {

  preg_match( '/{class: (.*)}/', beans_get_widget( 'title' ), $match );

 // Remove mini shortcode if set in the title.
 if ( $class = beans_get( 0, $match ) ) {
    return str_replace( $class, '', $title );
 }

 return $title;

}

Then you can use {class: uk-width-medium-1-1} anywhere in the title field and it would output in the grid item.

Let's look into the 2 phases of this new snippet:

1. Earlier on we used beans_replace_attribute() which is great but it doesn't allow us to have a callback function to add logic at the point of time the code runs. Likely Beans as a filter {$markup_id}_attributes which filter each markup (with markup ID) attributes. In the example above, note how we use beans_widget_grid[_hero]_attributes which let us have a callback function which runs for every _hero widgets and allow us to add conditions and modify the class attribute if needed. Cool huh?
2. The second phase is to filter the widget title output to remove the "mini shortcode" as we don't want it to be displayed in the title indeed. Please refer to this reply to learn more about the _output filters 🙂

Happy coding,

Hi Andrea, I just wanted to make sure you saw my last reply and that everthing is clear 🙂

Got it. Thanks a lot for support. Great!