Add menu dropdown option to customizer


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!


Write a reply

Login or register to write a reply, it's free!