We have made it really easy to add custom widget areas in Beans. Simply register the new widget area and attach it to one of the many hooks available.
Sidebar vs widget area
Widget areas in WordPress are referred to as sidebars. This terminology is from back in the day when WordPress was mainly a blog. A lot has changed since then and widget areas can be added anywhere on your site. For this reason, we opted to call them what they are – widget areas.
Registering a widget area
New widget areas can be added using beans_register_widget_area(), which is hooked to a callback function using the widgets_init action. Once registered, a new widget area will be added to the Admin->Appearance->Widgets page.
In addition to registering the new widget area, the beans_register_widget_area() function has a few valueable parameters, that let you dictate the widgets output.
Outputing a widget area
Registered widget area can be outputted using beans_widget_area().
Example
For this example, we’ll register a new “Hero” widget area and output it above the main content grid.
add_action( 'widgets_init', 'example_widgets_init' );
function example_widgets_init() {
beans_register_widget_area( array(
'name' => 'Hero',
'id' => 'hero',
'description' => 'Widgets in this area will be shown in the hero section as a grid.',
'beans_type' => 'grid'
) );
}
add_action( 'beans_main_grid_before_markup', 'example_hero_widget_area' );
function example_hero_widget_area() {
echo beans_widget_area( 'hero' );
}Any widgets added to the new hero widget area will output in an equal column grid, since the beans_type argument is set the grid. Widgets are set to stack vertically by default.