WordPress plugin options and jQuery

Question

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?

Answer 1

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;
}