Hi Yan Thiaudière,
Select or radio field uses 'options'.
...
'options' => array(
'four' => '1-1-1-1',
'three' => '1-1-1',
'twooneone' => '2-1-1',
'oneonetwo' => '1-1-2',
'twoon' => '2-1',
'onetwo' => '1-2'
)
...Happy coding!
Thanks man ! Works perfectly now 🙂
Hey Yan
Can you shared the final code you used? As it would be good for anyone seeing this thread to also get the solution. Thanks.
Paal Joachim
Hey Paal
I think the final code would be:
add_action( 'customize_register', 'bcs_customizer_add_footer_widgets_layout' );
function bcs_customizer_add_footer_widgets_layout() {
$fields = array(
array(
'id' => 'footer-widgets-layout',
'label' => __( 'Footer widgets layout', 'bcs' ),
'type' => 'select',
'options' => array(
'four' => '1-1-1-1',
'three' => '1-1-1',
'twooneone' => '2-1-1',
'oneonetwo' => '1-1-2',
'twoon' => '2-1',
'onetwo' => '1-2'
)
)
);
beans_register_wp_customize_options(
$fields,
'footer-widgets',
array(
'title' => __( 'Footer widgets', 'bcs' )
)
);
}With Beans the field typs are standardized, select and radio require an options array, see here: https://www.getbeans.io/documentation/field-types/#select
May confuse people a little, as with standard WordPress Customize controls class the select or radio option requires choices array as opposed to options array; https://codex.wordpress.org/Class_Reference/WP_Customize_Control
I've not actually implemented this, just from looking through relevant documentation, but I am wanting to start using the customizer more and am about to rebuild a theme with Beans, so will report back if I am wrong.
Hi all,
Sorry for the delay, but I'm currently working on some other stuff and I couldn't find my Beans project backup... But it's OK now, I got it.
So here is the final code, updated with 5 columns combinations.
You were right Jeff, by the way 😉
/*
* 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', 'bcs' )
) );
}
/*
* 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;
}
I also included the rendering part of the footer.
Enjoy Beans !!
And this is my footer credits implementation...
/*
* Register footer credit
*/
add_action( 'customize_register', 'bct_customizer_footer_credit' );
function bct_customizer_footer_credit() {
$fields = array(
array(
'id' => 'footer-credit',
'label' => 'Footer credit',
'type' => 'textarea',
'default' => '<a href="http://www.getbeans.io" rel="designer">Beans</a> child theme for WordPress'
)
);
beans_register_wp_customize_options( $fields, 'footer', array(
'title' => __( 'Footer', 'bcs' )
) );
}
/*
* Render footer credit
*/
beans_modify_action_callback( 'beans_footer_content', 'bct_render_footer_credit' );
function bct_render_footer_credit() {
beans_open_markup_e( 'beans_footer_credit', 'div', array( 'class' => 'uk-clearfix uk-text-small uk-text-center uk-text-muted' ) );
echo get_theme_mod( 'footer-credit', '<a href="http://www.getbeans.io" rel="designer">Beans</a> child theme for WordPress' );
beans_close_markup_e( 'beans_footer_credit', 'div' );
}Thats great, very useful thanks Yan!
Thank you so much Yan and Jeff!
I made a tutorial that I added here: https://wpbeansframework.com/2018/05/15/customizer-footer-layout-options-and-credits/
I did some modifications:
beans_register_wp_customize_options( $fields, 'footer', array(
'title' => __( 'Footer Layout', 'bcs' ), // Renamed to Footer layout
'priority' => 110 // ADDED
) );