Hi all,
In the process of creating a multi-purpose starter child theme, I would like to add footer widgets options to the theme customizer.
So I added this to register a select menu :
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',
'choices' => 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' )
) );
}The "Footer widgets" section appears in the customizer and the "Footer widgets layout" label as well, but the dropdown menu choices don't. I tried with a radio and it works, so I guess my 'choices' syntax is wrong...? Sorry i'm pretty newbie to Wordpress standards and can't find out the problem.
Yan
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
) );