The default widget areas in the official Beans Child theme with a left and right sidebar layout contains:
Sidebar Primary
Sidebar Secondary
Off-Canvas Menu
To locate the various areas one can add a widget into one can download the Beans Visual Hook Guide Plugin. Or go to the frontend of the site. Right click and select Inspect. Locate the various data-markup-id sections. These data markup section are where one can add a widget location.
As you see there are a lot of data-markup-id sections.
Here is an above header widget example
/*--- Above Header Widget —— Registers the widget location*/
add_action( 'widgets_init', 'beans_child_widget_above_header' );
function beans_child_widget_above_header() {
beans_register_widget_area( array(
'name' => 'Above Header',
'id' => 'above-header',
'description' => 'Widgets in this area will be shown above the header section as a grid.',
'beans_type' => 'grid'
) );
}
/*—— Display the above header widget area in the front end. ——*/
add_action( 'beans_header_before_markup', 'beans_child_above_header_widget_area' );
function beans_child_above_header_widget_area() {
// Stop here if no widget
if( !beans_is_active_widget_area( 'above-header' ) )
return;
?>
<div class="widget-above-header">
<div class="uk-container uk-container-center">
<?php echo beans_widget_area( 'above-header' ); ?>
</div>
</div>
<?php
}
A few things regarding the above code:
1. Registering a widget location. The name and description is seen in the widget screen. Beans type = grid. If there are multiple widgets then these will show up in a grid in relation to each other.
2. The widget location uses the data-markup-id: beans_header_before_markup
Meaning the widget location will be before the header.
Add the css class name widget-above-header (that is the name I use – you can choose your own name) to your CSS file and style it.
UK-container = Beans uses UiKit for layout and design of the site.
Inside functions.php: Displaying the widget code section can be done for all pages/posts (or use conditional logic) in the functions.php file as seen above.
Inside a page template: The display code section can be added to a page template and only seen by pages using the specific template.
More advanced and inside functions.php: One use a beans smart action in the functions.php file to select which page to show a widget in.
Hooks – the relation of where to place a widget area.
I am using header as an example.
beans_header = Default Beans core data markup.
beans_header_before_markup = Full width. Top of page. Before beans header
beans_fixed_wrap[_header]_prepend_markup = Fixed width. Inside the header wrap. Adjust header and prepend to another option and keep the fixed width.
beans_header_prepend_markup = Full width. Just above the title and menu.
beans_header_append_markup = Full width. At the end of the header.
beans_header_after_markup = Full width. After header.
The reason why the 4 hooks mentioned goes full width is because they are always outside the uk-container uk-container-center (aka fixed wrap).
Here is an example using the various hooks creating widget areas in the Header, Content and Footer area. There are a lot of possibilities.
Here are a lot of widget area examples
/*--- After Header Widget ----*/
add_action( 'widgets_init', 'beans_child_widget_after_header' );
function beans_child_widget_after_header() {
beans_register_widget_area( array(
'name' => 'After Header',
'id' => 'after-header',
'description' => 'Widgets in this area will be shown after the header section as a grid.',
'beans_type' => 'grid'
) );
}
// Display the after header widget area in the front end.
add_action( 'beans_header_after_markup', 'beans_child_after_header_widget_area' );
function beans_child_after_header_widget_area() {
// Stop here if no widget
if( !beans_is_active_widget_area( 'after-header' ) )
return;
?>
<div class="widget-after-header">
<div class="uk-container uk-container-center">
<?php echo beans_widget_area( 'after-header' ); ?>
</div>
</div>
<?php
}
/*---- Hero Widget ----*/
add_action( 'widgets_init', 'beans_child_widgets_init' );
function beans_child_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'
) );
}
// Display hero widget area in the front end
add_action( 'beans_main_grid_before_markup', 'beans_child_hero_widget_area' );
function beans_child_hero_widget_area() {
// Stop here if no widget
if( !beans_is_active_widget_area( 'hero' ) )
return;
?>
<div class="widget-hero uk-block">
<div class="uk-container uk-container-center">
<?php echo beans_widget_area( 'hero' ); ?>
</div>
</div>
<?php
}/*------- Before Content widget -------*/
add_action( 'widgets_init', 'beans_child_widgets_post_body_loop' );
function beans_child_widgets_post_body_loop() {
beans_register_widget_area( array(
'name' => 'Before Content',
'id' => 'before-content',
'description' => 'Widgets in this area will be shown in the before post_body section as a grid.',
'beans_type' => 'grid'
) );
}
// Display the content widget area in the front end.
add_action( 'beans_post_body', 'beans_child_post_body_widget_area' );
function beans_child_post_body_widget_area() {
// Stop here if no widget
if( !beans_is_active_widget_area( 'before-content' ) )
return;
?>
<div class="widget-before-content">
<div class="uk-container uk-container-center">
<?php echo beans_widget_area( 'before-content' ); ?>
</div>
</div>
<?php
}/*--- After content widget - also after comment in post ------*/
add_action( 'widgets_init', 'beans_child_widgets_content' );
function beans_child_widgets_content() {
beans_register_widget_area( array(
'name' => 'After Content',
'id' => 'after-content',
'description' => 'Widgets in this area will be shown in the after content section as a grid.',
'beans_type' => 'grid'
) );
}
// Display the content widget area in the front end.
add_action( 'beans_content', 'beans_child_content_widget_area' );
function beans_child_content_widget_area() {
// Stop here if no widget
if( !beans_is_active_widget_area( 'after-content' ) )
return;
?>
<div class="widget-after-content">
<div class="uk-container uk-container-center">
<?php echo beans_widget_area( 'after-content' ); ?>
</div>
</div>
<?php
}/*-------- Footer Header -----------*/
add_action( 'widgets_init', 'beans_child_widgets_footer_header' );
function beans_child_widgets_footer_header() {
beans_register_widget_area( array(
'name' => 'Footer Header',
'id' => 'footer-header',
'description' => 'Widgets in this area will be shown in the footer header section as a grid.',
'beans_type' => 'grid'
) );
}
// Display the footer header widget area in the front end.
add_action( 'beans_footer_before_markup', 'footer_header_widget_area' );
function footer_header_widget_area() {
// Stop here if no widget
if( !beans_is_active_widget_area( 'footer-header' ) )
return;
?>
<div class="widget-footer-header uk-block">
<div class="uk-container uk-container-center">
<?php echo beans_widget_area( 'footer-header' ); ?>
</div>
</div>
<?php
}/*------- Footer -------*/
add_action( 'widgets_init', 'beans_child_widgets_footer_loop' );
function beans_child_widgets_footer_loop() {
beans_register_widget_area( array(
'name' => 'Footer',
'id' => 'footer',
'description' => 'Widgets in this area will be shown in the footer section as a grid.',
'beans_type' => 'grid'
) );
}
// Display the footer widget area in the front end.
add_action( 'beans_footer_before_markup', 'footer_widget_area' );
function footer_widget_area() {
// Stop here if no widget
if( !beans_is_active_widget_area( 'footer' ) )
return;
?>
<div class="widget-footer uk-block">
<div class="uk-container uk-container-center">
<?php echo beans_widget_area( 'footer' ); ?>
</div>
</div>
<?php
}// Register bottom widget area.
beans_add_smart_action( 'widgets_init', 'banks_register_bottom_widget_area' );
function banks_register_bottom_widget_area() {
beans_register_widget_area( array(
'name' => 'Bottom',
'id' => 'bottom',
'description' => 'Widgets in this area will be shown in the bottom section as a grid.',
'beans_type' => 'grid'
) );
}
// Display the Bottom widget area in the front end.
add_action( 'beans_footer_after_markup', 'bottom_widget_area' );
function bottom_widget_area() {
// Stop here if no widget
if( !beans_is_active_widget_area( 'bottom' ) )
return;
?>
<div class="widget-bottom uk-block">
<div class="uk-container uk-container-center">
<?php echo beans_widget_area( 'bottom' ); ?>
</div>
</div>
<?php
}Conditionally showing widget locations
An example on conditionally showing a widget location using the hero widget location.
/*---- Hero Widget ----*/
add_action( 'widgets_init', 'beans_child_widgets_init' );
function beans_child_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'
) );
}
// Display hero widget area in the front end
if ( function_exists( 'beans_widget_area' ) ) {
add_action( 'beans_main_grid_before_markup', 'beans_child_hero_widget_area' );
function beans_child_hero_widget_area() {
if (is_front_page ()) {
?>
<div class="widget-hero uk-block">
<div class="uk-container uk-container-center">
<?php echo beans_widget_area( 'hero' ); ?>
</div>
</div>
<?php
}
}
}Another way to write the conditional statement:
/*--- Before Main content Widget - HERO widget ----*/
add_action( 'widgets_init', 'beans_child_widget_hero' );
function beans_child_widget_hero() {
beans_register_widget_area( array(
'name' => 'Hero area',
'id' => 'hero',
'description' => 'Widgets in this area will be shown before the Main content section as a grid.',
'beans_type' => 'grid'
) );
}
// Display before Main content widget area - HERO widget in the front end.
add_action( 'beans_main_grid_before_markup', 'beans_child_hero' );
function beans_child_hero() {
// Stop here if no widget
if( !beans_is_active_widget_area( 'hero' ) === ( is_page('home') ) )
return;
?>
<div class="widget-hero">
<div class="uk-container uk-container-center">
<?php echo beans_widget_area( 'hero' ); ?>
</div>
</div>
<?php
}
If function exists then do beans_widget_area.
If is front page then show widget area.
! = is not.
&& = and
== = equal. Example: is_page (‘about-me’) == is_page(‘contact’);
=== = identical.
|| = or
(is_page())
(is_front_page ())
(is_page (‘id of page/post’))
(is_page (‘about-me’))
(is_page ( array(‘member’, ‘member-page-2’, ‘member-page-3’, ‘member-page-4’) ))
(( is_archive() || is_singular(‘page’) ) ) —> II brings two options together.
(is_page_template( ‘name of page template’ ))
NB! One can use the words and or. Instead of && or||.
To remove default widgets:
// unregister some of the default widgets
function remove_default_widgets() {
// unregister_widget('WP_Widget_Pages');
unregister_widget('WP_Widget_Calendar');
unregister_widget('WP_Widget_Archives');
// unregister_widget('WP_Widget_Meta');
// unregister_widget('WP_Widget_Search');
// unregister_widget('WP_Widget_Text');
// unregister_widget('WP_Widget_Categories');
// unregister_widget('WP_Widget_Recent_Posts');
// unregister_widget('WP_Widget_Recent_Comments');
unregister_widget('WP_Widget_RSS');
unregister_widget('WP_Widget_Tag_Cloud');
// unregister_widget('WP_Nav_Menu_Widget');
}
add_action('widgets_init', 'remove_default_widgets', 11);
Moving widget code into a separate php file
If you plan on adding lots of widget areas I would then suggest moving these into a seperate file.
Then adding the following code or something similar to the functions.php file:
/* Include widget php file */ include_once ( 'widgets.php' );
Check my other tutorial on including multiple files.
Resources:
community.getbeans.io/discussion/beans-html-api-visual-hooks-guide
https://developer.wordpress.org/reference/functions/is_page/
php.net/manual/en/language.operators.comparison.php
https://community.getbeans.io/discussion/what-about-a-visual-hook-guide/
https://www.getbeans.io/documentation/markup-and-attributes/
https://www.getbeans.io/documentation/adding-a-widget-area/
No comment yet, add your voice below!