How to make WordPress live customizer select choices to update automatically via Ajax?

3 Views

If I want to use select option with different choices in my WordPress theme customizer, how can I make that choice to change on live on the theme.

So, I have a section in my functions.php file like this:

Read More
$wp_customize->add_setting(
    'menu_type',
    array(
        'transport' => 'postMessage',
        'default' => 'choice1',
    )
);

$wp_customize->add_control(
    'menu_type',
    array(
        'type' => 'select',
        'label' => 'Select your menu type:',
        'section' => 'header_section',
        'choices' => array(
            'choice1' => 'Choice 1',
            'choice2' => 'Choice 2',
            'choice3' => 'Choice 3',
            'choice4' => 'Choice 4',
        ),
    )
);

And in my ajax file I have a section like this: 

wp.customize( 'menu_type', function( value ) {
    value.bind( function( newval ) {
        $('.someclass').css('border', '1px solid #111');    
    } );
} );

Code in the ajax file changes css to ALL the choices. So what do I need to add in my ajax file, so I can make change for “choice1” ONLY instead?

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. Ok, heres the answer:

    wp.customize( 'menu_type', function( value ) {
    value.bind( function( newval ) {
        if ( newval == 'choice1' ) {
            $( '.someclass' ).css('border', '1px solid #111'); 
        } else if ( newval == 'choice2' ) {
            $( '.someclass' ).css('border', '1px solid #222'); 
        } else if ( newval == 'choice3' ) {
            $( '.someclass' ).css('border', '1px solid #333'); 
        }
    } );
} );