Add a widget area

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.

 

Beans-data-markup-id-sections

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.

 

Beans-Header-Content-Footer-Widget-Locations

 

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!


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *
Website