1

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

  • 1
    You could use wp_localize_script() – Howdy_McGee Apr 16 '15 at 19:46
  • @Howdy_McGee I never see you writing these things as an answer. Just wanted to start to write a nice answer when I saw, Howdy was here already. Wouldnt it be better to write a answer, so people can see it better and mark the question as answered and all this stuff? – websupporter Apr 16 '15 at 20:12
  • 1
    @websupporter I want to help people solve their issues or push people in the right direction but sometimes I don't have the time to write descriptive answers. My comments are usually to push OP in the right direction and allows somebody to put in the time I can't to answer the question. In this case, the codex does a good job at explaining how to use the function but I think it would be cheap to copy / paste the codex into an answer. Comments are by no means a definitive answer so you shouldn't be discouraged from answering if a comment points out something. – Howdy_McGee Apr 16 '15 at 20:26
  • 1
    fair enough. well i quickly wrote an answer. i understand the time limitations and stuff. i just felt strange, hmmm... there should be an answer as "answer" but he gave it already. man, he does this quite often. so, now i know :) – websupporter Apr 16 '15 at 20:29
  • Thanks for the advice. Just by knowing about wp_localize_script() would of given me an idea where to look etc. Thanks again. – rikardo85 Apr 17 '15 at 9:05
4

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>
  • 1
    Brilliant! works a charm! I do enqueue my custom scripts :) I was just playing around in a dev environment. – rikardo85 Apr 17 '15 at 9:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.