Add get_option to jquery

Question

I have created a settings page that contains various radio button options for a custom plugin.

A radio button I've created is to 'display dots' with the values yes or no. I can get use the value any other time except in the jQuery function below.

I would like to get the value of the option to use for 'dots' in the jQuery function below.

jQuery script

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('.single-item').slick({
    arrows: true,
    dots: ***OPTION VALUE HERE (true or false)***
  });
});

To display the radio buttons I'm using:

 <input type="radio" name="testimonial_bullet" id="mws_testimonial_bullet_yes" value="" checked="checked">Yes
 <input type="radio" name="testimonial_bullet" id="mws_testimonial_bullet_no" value="no" <?php if (checked( get_option('testimonial_bullet'), 'no' )); ?> />No

To get the get_option value, I'm using:

if (get_option('testimonial_bullet') == 'no') {
 // code here
}

Any help much appreciated

Answer 1

Anyway, basically Hody_McGee gave the answer in his comment: You could use wp_localize_script(). As it states in the Codex:

[wp_localize_script()] can be used to make any data available to your script that you can normally only get from the server side of WordPress.

How do we do this?

<?php
add_action( 'wp_enqueue_scripts', 'register_scripts' );
function register_scripts(){
    wp_enqueue_script( 'some_handle', 'path-to-file', array( 'jquery' ) );
    $phpInfo = array(
        'testimonial_bullet' => get_option( 'testimonial_bullet' )
    );
    wp_localize_script( 'some_handle', 'phpInfo', $phpInfo );
}
?>

You extend your function, where you enqueue your script (you enqueue it, right?). After you've did this (or you've registered it), you can use wp_localize_script() to pass an object to this script. In our case, we create an array $phpInfo, which contains the information of the option.

In your script, you can now retrieve the passed content:

jQuery(document).ready(function(){
  if( phpInfo.testimonial_bullet == 'no' )
    var d = '---';
  else
    var d = '...';

  jQuery('.single-item').slick({
    arrows: true,
    dots: d
  });
});

Well, but I don't enqueue

I add this, because I see the <script>-Tag, so these information might be interesting. First of all, you should. Its easy and good practice. Have a look into wp_enqueue_script(). It you still think, it might be better to write it in the header.php or foorter.php, of course there might be reasons to do so. In this case, you can simply retrieve the information like this:

<script>
    jQuery(document).ready(function(){
      if( '<?php echo get_option( 'testimonial_bullet' ); ?>' == 'no' )
        var d = '---';
      else
        var d = '...';

      jQuery('.single-item').slick({
        arrows: true,
        dots: d
      });
    });
</script>