Using Wordpress Customizer in Javascript

Question

I created a custom control for the Wordpress Customizer, and I would like to set my control inside the script (Instafeed.js) to change the limit number.

Following this answer , here is how I did it so far

 <script type="text/javascript"> var userFeed = new Instafeed({ get: '', tagName: '', clientId: '', limit: var imglimit = <?php echo json_encode($imglimit); ?>;, }); userFeed.run(); </script> 

Functions

 $wp_customize->add_setting( 'imglimit', array( 'default' => '', 'section' => 'section', )); $wp_customize->add_control('imglimit', array( 'label' => __('test'), 'section' => 'section', 'settings' => 'imglimit', 'type' => 'select', 'choices' => array( '5' => '5', '10' => '10', '20' => '20', ), )); function theme_customizer() { $imglimit = get_theme_mod('imglimit'); } 

Can someone tell me where the error is? I have been looking for this for a while.

Answer 1

You have a syntax error here :)

  var userFeed = new Instafeed({ get: '', tagName: '', clientId: '', limit: var imglimit = <?php echo json_encode($imglimit); ?>;, // ^^^^^^^^^^^^ here and here ^ }); 

So you should change this code block to

  var userFeed = new Instafeed({ get: '', tagName: '', clientId: '', limit: <?php echo json_encode($imglimit); ?>, }); 

In fact, you do not have to encode json here, as this is just a number. But if it was some kind of array or object, yes, you should have encoded it.

And in your php code you have to do $imglimit global:

 function theme_customizer() { global $imglimit; $imglimit = get_theme_mod('imglimit'); } 

Or just put this in js:

  var userFeed = new Instafeed({ get: '', tagName: '', clientId: '', limit: <?php echo json_encode(get_theme_mod('imglimit')); ?>, });