Widgets responsivos: injetar automaticamente classe de coluna de grade

Pode ser uma dor para um desenvolvedor de tema WordPress dizer ao usuário para não adicionar ou remover um widget de uma barra lateral orientada horizontalmente usando um sistema de grade responsivo.

Aqui está um código para injetar automaticamente a classe de coluna na tag de abertura do widget. Ele também ajusta as colunas da classe . Isso evita que o usuário quebre seu layout bonito e responsivo.

Copie / cole o seguinte código em functions.php:

<?php
/**
 * Inject Grid column into each widgets
 */
function widget_col_class( $params ) {

    // Column in you grid:
    $grid_columns = 12;

    // Check if we are injecting the right sidebar, replace 'Sidebar' by the sidebar name you want
    if ( $params[0]['name'] == 'Sidebar' ) {

        // Get sidebars
        $the_sidebars = wp_get_sidebars_widgets();
        $widgets = count( $the_sidebars[ $params[0]['id'] ] );

        // Compute number
        $col = $grid_columns / $widgets;

        // Inject the new class
        $params[0]['before_widget'] = preg_replace('/(class=")/', 'class="col-' . (int)$col . ' ', $params[0]['before_widget']);
    }

    return $params;
}
add_filter( 'dynamic_sidebar_params', 'widget_col_class' );
?>

Que retornará à sua área da barra lateral algo assim:

<div id="sidebar" class="row">
    <div id="my-widget-1" class="col-4 widget-menu">
       ...
    </div>
    <div id="my-widget-2" class="col-4 widget-menu">
       ...
    </div>
    <div id="my-widget-3" class="col-4 widget-menu">
       ...
    </div>
</div>

Aproveitar!