2

I'm creating a plugin that uses jQuery to modify some css, but what I can't figure out is how you can control the execution of the jQuery with WordPress plugin options (like checkboxes true/false). Can WordPress options be used as "variables" in jQuery? Or would every case require a unique .js file?

1 Answer 1

3

Variable can be passed to jQuery or any javascript using wp_localize_script.

Example:

add_action( 'template_redirect', 'prefix_enqueue_vars' );
function prefix_enqueue_vars() {
$script_vars = array(
      'setting_1' => get_option( 'some_option' ),
      'setting_2' => get_option( 'another_option' ),
);

wp_enqueue_script( 'my_script', 'path/to/script.js', array( 'jquery' ), true);
wp_localize_script( 'my_script', 'unique_name', $script_vars );

}

How to get the variables in your javascript:

jQuery(document).ready(function($) {

$var_1 = unique_name.setting_1
$var_2 = unique_name.setting_2

});

WordPress will output your variables between <sript> </script> tags before enqueuing the javascript file so they will be available to use.

See wp_localize_script from Otto on WordPress for more information.

Edit:

Try adding the variables to a function that returns the value. I'm using the exact code below and it works.

wp_localize_script( 'cmb-scripts', 'MaxChar', array( 'charlimit' => c3m_get_the_size( $excerpt_length[0] ) ) );

The function that returns the variables below:

function c3m_get_the_size() {
global $post; global $prefix;
$box_size = get_post_meta( $post->ID, $prefix.'box_size', true );
 if  ( $box_size == 'single-single' ) { $excerpt_length = 150; 
} elseif ( $box_size == 'single-double' ) { $excerpt_length = 150; 
} elseif ( $box_size == 'single-triple' ) { $excerpt_length = 150;

}
return $excerpt_length;
}
5
  • Thanks for the eye opener Chris_O, I can indeed see the extra script in the head section. However, the option value is not printed, I'm seeing something like var unique_name = {setting_1: ""};. I followed Otto's tut on the Settings API to create the options, and I think I set up everything correctly. Any suggestions?
    – Triple P
    Jun 9, 2011 at 13:41
  • @Triple P There was a syntax error in the $script_vars array. I edited the code above. Give it another try.
    – Chris_O
    Jun 9, 2011 at 14:24
  • Over at Otto's page a commenter recently wrote: "The output from the validator callback is totally masked, at least in WordPress 3.1.2. Echo, print_r, etc… None of them output anything. I have debug set to true in my wp_config and still nada." Could that be the reason why there is no output?
    – Triple P
    Jun 9, 2011 at 16:35
  • Try using a function to return the variables. See Edit.
    – Chris_O
    Jun 9, 2011 at 17:34
  • Adding 'foo' => 'bar' to the array works fine, so I guess it has something to do with storing or retrieving the options. Is it ok that "bar" is outputted between double quotes? Thanks for your enlightening answer!
    – Triple P
    Jun 9, 2011 at 18:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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