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
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;
}
-
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 PJun 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_OJun 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 PJun 9, 2011 at 16:35
-
-
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 PJun 9, 2011 at 18:48