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.

structure-settings

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 );

 

Widget Settings

When you register a new widget area, the widget area will define certain tags and classes for any widgets it contains. You can set these tags and classes from the Gridgets settings.

Go to Settings > Gridgets in your dashboard. Under the ‘General’ tab are some options to set the widget wrapper class and page title:

gridgets-general-settings

The ‘Widget Tag’ is the HTML element that will wrap any widgets in your widget areas. You can specify classes for the wrapper in the ‘Widget Classes’ field.

The ‘Widget Title Tag’ is the HTML element that will wrap the widget title. Specify classes in the ‘Widget Title Classes’ field.

Hide the page title

This feature attempts to allow you to hide page titles on certain pages. When you select this option, it filters the page title and returns a null value. This will only work if your theme is correctly using the the_title tag so if the page title is still displaying after checking this option, you will need to take a look at your theme files.

hide-page-title

Full width widget areas

In the ‘Gridget Styles’ widget, there is a ‘Full Width’ setting that will allow you to force the widget area to extend the full width of the page.

full-width-setting

Please note that this may not match your theme’s styles so it should be used with caution. For example, if your theme pages always have a sidebar, the full-width widget area will extend across and over the sidebar, which is not recommended.

If possible, choose a page template that doesn’t include a sidebar when using a full-width widget area.

Columns

You can set the layout for each widget area separately. This means that you can have a single column hero image at the top of your page, followed by a three column layout featuring icon blocks below, then four columns of text, and so on.

To set the number of columns for your sidebar, use the ‘Layout’ dropdown:

set-columns

The widgets that you add to this widget area will then automatically lay themselves out according to the selected number of columns. If you’ve selected two columns, the first widget you add will sit in the left hand column and the second widget will sit on the right. Drag and drop the widgets to change their order.

column-layout

If you add more widgets than there are columns, the additional widgets will start a new row with the same layout.

three-widgets-two-columns

Styling your widget area

Widget areas created using Gridgets are different from standard widget areas created through your theme because you are able to style them. You do this through a specially created widget, called ‘Gridget Styles’, that will apply styles to widget areas. Note that this will only work with widget areas you’ve created, not with the standard widget areas defined by your theme.

From the Customizer Panel, add the Gridget Styles widget.

add-gridget-styles

Edit the styles for the widget area:

edit-styles

Note that some styles won’t register unless you have other widgets with content in your widget area.

When you’ve made your changes and you’re happy for them to go live, click ‘Save and Publish’ at the top of the Customizer Panel.

Adding widgets to your widget area

You can add widgets to your widget areas in exactly the same way you would for standard widget areas created with your theme, namely via the Appearance > Widgets screen in your dashboard or through the Customizer. Using the Customizer is by far the best way, though, as it allows you to see what the content looks like as you add it.

Go to your page and click on the ‘Customize’ button in the admin bar. The Customizer panel will open. Click on Widgets then select the name of your widget area. Click the ‘Add a Widget’ button.

add-a-widget

You can now choose from all the widgets available to you. Click your selected widget and begin to edit it.

select-a-widget

Create a sidebar for a page

Gridgets work by allowing you to create sidebars on individual pages. You can add widgets to these sidebars, just like standard sidebars, and the widgets will display above the page content. You can define styles for the sidebars, like background color and images, and define a layout so that the widgets you add display in columns.

To add a sidebar to a page, just edit the page as normal. Under the main content editor, you’ll find a new custom field section entitled ‘Widget Areas Before Content’.

add-widget-area

Enter a name for your new widget area and click ‘Add Widget Area’. This will register a new widget area on your site that will only display on one page.

new-widget-area

You can add as many widget areas to your page as you like.

Adding widgets to the widget area

When you’ve added your widget area, you can view the page then click on the ‘Customizer’ button in the admin bar to open the Customizer panel and preview. Click on Widgets and you’ll see your new widget area.

customizer-new-widget-area

Click into the new widget area to start adding widgets.