Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

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;
}
share|improve this answer
    
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 '11 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 '11 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 '11 at 16:35
    
Try using a function to return the variables. See Edit. –  Chris_O Jun 9 '11 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 '11 at 18:48
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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