Using Wordpress Customizer in Javascript

Question

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

Following this answer this 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');
}

Could anyone tell me where is the mistake ? I've been searching for this for a while.

Alexander Mikhalchenko · Accepted Answer · 2015-12-27T14:30:52.553

2

Well, you've got 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 that block of code to

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

Actually you don't necessarily need to json encode here since it's just a number. But if that was some array or object, yes, you should've encoded that.

And in your php code you should make $imglimit global:

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

Or just put that into js:

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

edited Dec 27 '15 at 14:30

answered Dec 26 '15 at 23:15

Alexander Mikhalchenko

4,525
3
32
56

Thanks for answer, I tried it but it's still not working. The script doesn't break anymore (I can see the images), but it is by default a limit of 20 images (third option in customizer control, if third option is 40 for example, it stays 20). If I try to change the limit through the customizer, the limits stays to 20 anyway. (I tried to clear cache too). Any ideas why the customizer isn't updating the `limit` ? – dbsso Dec 27 '15 at 09:49
@dbsso, and if you hardcode the limit, would that work as expected? – Alexander Mikhalchenko Dec 27 '15 at 10:16
It does work with defined numbers, if I understand what you're asking. – dbsso Dec 27 '15 at 13:00
@dbsso and what does ``limit: ,`` actually output on the client? – Alexander Mikhalchenko Dec 27 '15 at 13:04
It says `limit: null,`. By the way, the script breaks without `json_encode` for some reason. – dbsso Dec 27 '15 at 14:27
@dbsso, yeah, since it's not casted to integer, the output w/o ``json_encode`` would be `` limit: ,``. Updated the answer. – Alexander Mikhalchenko Dec 27 '15 at 14:32
It worked perfectly with `` ! Thanks a lot sir. – dbsso Dec 27 '15 at 14:37

Using Wordpress Customizer in Javascript

1 Answers1