Add a widget area part 2

I will likely add on a lot to this widget area part 2 tutorial.

Right now I have code that Yan shared on the Get Beans forum, and
another footer widget code just below it also picked up at the forum.

 

It adds code to the Customizer so one can select the order of footer widgets. Based on a specific layout.
Here is an example of what it looks like:

 

 

Beans-Customizer-Footer-Widgets-Layout

 

Go to the Customizer:
Just below the Widgets is a Footer Layout area. Where you can choose how to align the footer layout.
Then go to Widgets and add the widgets you want to use.

Here is the code:

 

/* —- This file adds the Customizer additions to the Beans child theme. */
/*
* Register footer widgets options in customizer
*/
add_action( ‘customize_register’, ‘bct_customizer_footer_widgets’ );
function bct_customizer_footer_widgets() {

$fields = array(
array(
‘id’ => ‘footer-widgets-layout’,
‘label’ => __( ‘Footer widgets layout’, ‘bcs’ ),
‘type’ => ‘select’,
‘default’ => ‘four’,
‘options’ => array(
‘five’ => ‘1-1-1-1-1’,
‘three-two’ => ‘3-2’,
‘two-three’ => ‘2-3’,
‘three-one-one’ => ‘3-1-1’,
‘one-one-three’ => ‘1-1-3’,
‘four’ => ‘1-1-1-1’,
‘two-one-one’ => ‘2-1-1’,
‘one-one-two’ => ‘1-1-2’,
‘three’ => ‘1-1-1’,
‘two-one’ => ‘2-1’,
‘one-two’ => ‘1-2’,
),
),
);

beans_register_wp_customize_options( $fields, ‘footer’, array(
‘title’ => __( ‘Footer Layout’, ‘bcs’ ), // Renamed to Footer layout
‘priority’ => 110 // ADDED
) );

}

/*
* Register footer widgets areas
*/
add_action( 'widgets_init', 'bct_register_footer_widgets' );
function bct_register_footer_widgets() {

for( $i = 1; $i <= 5; $i++ ) {
beans_register_widget_area( array(
'name' => "Footer {$i}",
'id' => "footer{$i}",
) );
}

}

/*
* Render footer widgets
*/
add_action( 'beans_footer_before_markup', 'bct_render_footer_widgets' );
function bct_render_footer_widgets() {

$output = '';
$layout = get_theme_mod( 'footer-widgets-layout', 'four' );

for( $i = 1; $i <= 5; $i++ ) {
switch ( $layout ) {
case 'three' :
if ( 4 == $i )
continue 2;
$width = '1-3';
break;
case 'four' :
if ( 5 == $i )
continue 2;
$width = '1-4';
break;
case 'two-one-one' :
if ( 4 == $i )
continue 2;
$width = ( 1 == $i ) ? '1-2' : '1-4';
break;
case 'one-one-two' :
if ( 4 == $i )
continue 2;
$width = ( 3 == $i ) ? '1-2' : '1-4';
break;
case 'three-one-one' :
if ( 4 == $i )
continue 2;
$width = ( 1 == $i ) ? '3-5' : '1-5';
break;
case 'one-one-three' :
if ( 4 == $i )
continue 2;
$width = ( 3 == $i ) ? '3-5' : '1-5';
break;
case 'two-one' :
if ( 3 <= $i )
continue 2;
$width = ( 1 == $i ) ? '2-3' : '1-3';
break;
case 'one-two' :
if ( 3 <= $i )
continue 2;
$width = ( 2 == $i ) ? '2-3' : '1-3';
break;
case 'three-two' :
if ( 3 <= $i )
continue 2;
$width = ( 1 == $i ) ? '3-5' : '2-5';
break;
case 'two-three' :
if ( 3 <= $i )
continue 2;
$width = ( 2 == $i ) ? '3-5' : '2-5';
break;
default :
$width = '1-5';
break;
}
$widgets = beans_widget_area( "footer{$i}" );
if ( empty( $widgets ) ) {
continue;
}
$output .= '<div class="uk-width-medium-' . $width . '">' . $widgets . '</div>';
}

if ( ! empty( $output ) ) :
?>
<div class="footer-widgets widgets-<?php echo $layout; ?> uk-block">
<div class="uk-container uk-container-center">
<div class="uk-grid uk-grid-match" data-uk-grid-margin>
<?php echo $output; ?>
</div>
</div>
</div>
<?php
endif;

}

 

The code is from this forum post:
community.getbeans.io/discussion/add-menu-dropdown-option-to-customizer
(Thanks to Yan for adding the code!)

I added the code to a customize.php file that I placed into a lib folder located in the root of the child theme. Then through functions.php added:
require_once ( get_stylesheet_directory() . ‘/lib/customize.php’ );

Yan also added Customizer code for the footer copyright section. I have added that at the bottom of the Copyright section tutorial.

 

How to add 3 footer widget areas in one place.

Here is another widget code I picked up at the Get Beans forums.

 

Beans-3-footer-widgets

 

// https://community.getbeans.io/discussion/how-to-add-3-widgte-area-in-one-place/
add_action( 'widgets_init', 'footer_widgets_init' );
function footer_widgets_init() {

// Create 3 widget area.
for( $i = 1; $i <= 3; $i++ ) {
beans_register_widget_area( array(
'name' => "Footer Widget {$i}",
'id' => "footer_widget_area_{$i}",
) );
}
}

// Output widget area above the footer.
add_action( 'beans_footer_before_markup', 'example_footer_widget_area' );
function example_footer_widget_area() {

?>
<div class="footer-widget uk-block">
<div class="uk-container uk-container-center">
<div class="uk-grid uk-grid-width-medium-1-3" data-uk-grid-margin>
<?php for( $i = 1; $i <= 3; $i++ ) : ?>
<div><?php echo beans_widget_area( "footer_widget_area_{$i}" ); ?></div>
<?php endfor; ?>
</div>
</div>
</div>
<?php
}

Resource used:
community.getbeans.io/discussion/how-to-add-3-widgte-area-in-one-place/

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