customizer live preview layout picker

Question

I'm trying to create a layout picker option using the wordpress customizer. What i've done so far works except for the live preview. when i change an option in the customizer for example left sidebar the css should change to display the sidebar on the left however when changing an option the sidebar disappears and is replaced by a number corresponding to the order of the option chosen. can someone please point out where i'm going wrong here.

Here's the php.

function embee_customize_register( $wp_customize ) {
//All our sections, settings, and controls will be added here

//Add Layout Options section
$wp_customize->add_section('embee_layout_section_options', array(
    'title'    => __('Layout Options', 'mybasictheme'),
    'description' => 'Change various site section layouts.',
    'priority' => 1,
));

$wp_customize->add_setting('embee_layout_section_options[site_layout]', array(
    'default'        => '3',
    'capability'     => 'edit_theme_options',
    'transport'      => 'postMessage',
    'type'           => 'option',
));

$wp_customize->add_control( 'select_box', array(
    'settings' => 'embee_layout_section_options[site_layout]',
    'label'   => 'Site Layout',
    'section' => 'embee_layout_section_options',
    'type'    => 'select',
    'choices'    => array(
        '1' => 'Left Sidebar',
        '2' => 'Right Sidebar',
        '3' => 'Three Column',
        '4' => 'Full Width',
    ),
    'description' => 'Change sidebar layouts.',
));
}
add_action( 'customize_register', 'embee_customize_register' );

function embee_customizer_live_preview()
{
wp_enqueue_script( 
      'embee-customizer',           //Give the script an ID
      get_template_directory_uri().'/mbpanel/js/customizer.js',//Point to file
      array( 'jquery','customize-preview' ),    //Define dependencies
      '',                       //Define a version (optional) 
      true              //Put script in footer?
);
}
add_action( 'customize_preview_init', 'embee_customizer_live_preview' );

function layout_customize_css()
{
$options = get_option( 'embee_layout_section_options' );
?>
     <style type="text/css">
        #content { <?php if( $options['site_layout'] == '1' ) { ?> float: right; <?php } ?> } #sidebar_primary { <?php if( $options['site_layout'] == '1' ) { ?> float: left; <?php } ?> }
        #content { <?php if( $options['site_layout'] == '2' ) { ?> float: left; <?php } ?> } #sidebar_primary { <?php if( $options['site_layout'] == '2' ) { ?> float: right; <?php } ?> }
        #content { <?php if( $options['site_layout'] == '3' ) { ?> float: left; <?php } ?> } #sidebar_primary { <?php if( $options['site_layout'] == '3' ) { ?> float: left; <?php } ?> } #sidebar_secondary { <?php if( $options['site_layout'] == '3' ) { ?> float: left; <?php } ?> }
        #content { <?php if( $options['site_layout'] == '4' ) { ?> float: none; width: 100%; <?php } ?> }
     </style>
<?php
}
add_action( 'wp_head', 'layout_customize_css');

And here's the javascript

( function( $ ) {
wp.customize( 'embee_layout_section_options', function( value ) {
    value.bind( function( to ) {
        $( '#sidebar_primary' ).css( 'float', 'left' );
    } );
} );

} )( jQuery );

Answer 1

You don't need javascript, just change the class using the get_theme_mod variable e.g.

<?php
$layout = get_theme_mod('embee_layout_section_options[site_layout]', '3');
$class = '';
if($layout == '1') {
 $class = 'this';
} elseif($layout == '2') {
 $class = 'that';
}
?>
<div class="<?php echo $class; ?>">
 // stuff
</div>

Put that in your template file e.g. page.php and the live customizer will pick it up

Then creates the classes e.g.

.this {
 float:left;
}
.that {
 float:right;
}

I have built some massive complex stuff in the customizer and never had to add javascript, it's all done through the template files and get_theme_mod