Widget Area Settings

You can change settings for how your widget areas are structured by going to Settings > Gridgets and clicking on the ‘Structure’ tab.


The ‘Mobile Breakpoint’ defines the point at which widgets will display at 100% width whatever column setting you’ve defined.

You can add classes to the container and inner elements.

Filtering Wrapper Classes

Gridgets adds its widget areas by filtering the_content, placing widget areas before the content is returned. Widget areas are structured like this:

<div class="<?php echo esc_attr( join( ' ', $classes ) ); ?>" style="<?php echo esc_attr( join( ';', $styles ) ); ?>">
 <div class="<?php echo esc_attr( join( ' ', $container_classes ) ); ?>">
   <div class="<?php echo esc_attr( join( ' ', $inner_classes ) ); ?>">
     <?php dynamic_sidebar( $sidebar ); ?>
   </div><!-- .gridgets-before-content-inner-wrapper -->
 </div><!-- .gridgets-before-content -->
</div><!-- .gridgets-before-content-wrapper -->


You can add your own classes to these elements in a couple of different ways. Either via the settings page at Settings > Gridgets > Structure tab or programmatically via the following filters:

$classes = apply_filters( 'gridget_before_content_wrapper_classes', $classes );
$container_classes = apply_filters( 'gridget_container_classes', $container_classes );
$inner_classes = apply_filters( 'gridget_inner_classes', $inner_classes );