What is the proper way to pass options to a jquery file? - php

Question

On each page of my theme, a user has the option of adding a slider. When they do this, they can choose several settings for the slider. This includes things such as how long the slides will pause before changing, how long it takes for the slide to transition when it changes, and what type of transition it uses.
Now if I were to just hard code this and not let the user choose the options for the slider, the code would look like this:
<script>
jQuery(function(){
jQuery('#camera_wrap_3').camera({
height: '40%',
thumbnails: true,
time: 3500,
fx: 'scrollBottom',
transPeriod: 1200,
autoAdvance: true,
minHeight: '50px',
mobileNavHover: false,
});
});
</script>
What is the proper way to pass the variables that are created when the user chooses their settings to the code above?
Keep in mind that I want to be able to enqueue this file the proper way with wp_enqueue

Answer 1

I'm assuming this is related to your question about passing variables to wp_head - if you want to store parameters from a plugin, Wordpress provides two (three if you are using multisite) methods depending on the scope of your parameters.
If it is specific to a page/post, then you should store the parameters in the postmeta table with the Custom Fields API. You would use update_post_meta($post_id, $key, $data) and fetch it with get_post_meta($post_id, $key, $single) where $single is true/false depending on if you want an array of values or just a single value - if it is something like "width" you would probably set this to true. More info here - http://codex.wordpress.org/Custom_Fields.
If it is applicable to the entire site, then you would store it in the Options API in the options table using update_option($key, $data) and retrieve it with get_option($key, $default) where $default is returned if the $key can't be found, otherwise it will return false. The last option applicable only to multisite is also part of the Options API and uses update_site_option($key, $data) and get_site_option($key, $default). More info here - http://codex.wordpress.org/Options_API.
An excellent option for managing custom fields (and options through a premium feature) is Advanced Custom Fields.
Assuming this is per post/page, and you are setting the values with ACF, you can then write a hook to wp_head to pull these fields into your Javascript. You can either put this into the functions.php file in your theme, or if you want it to stick around if you change themes, you can use a Custom Functions Plugin.
// hooked to wp_head
function my_wp_head(){
// get the current $post
global $post;
// get value or key "camera_time"
$camera_time = get_post_meta($post->ID, "camera_time", true);
// write result to javascript
echo "<script>";
echo "var cameraTime = {$camera_time};";
// ... the rest of your javascript
echo "</script>";
}
if (is_single()) // only include on single pages
add_action( 'wp_head', 'my_wp_head' );

Answer 2

you can use extend method for that.
function foo (params) {
//default values
var settings = $.extend({
'someKey': { k1: 'v1' },
'otherKey': 'oTherValue'
}, params);
//use it
if (settings.someKey.k1 == 'v1') ...
var bar = settings.otherKey;
}
then just call it from your code
foo({someKey: {k1: 'v2'}, otherKey: 'bla' });
i created a simple jQuery plugin usnig this approach. check it out