Use options to control jQuery plugin

Question

This may be a dumb question, but I've been teaching myself Wordpress and I've been struggling with this for a while. What I want to do is use a Wordpress control panel page to control a countdown clock on my site. I found a jQuery countdown that seems like it will work well and I've learned how to create a plugin with an options page and how to get that options page talking with the options database.

I've got the options page creating an array with the month, day, and time that the countdown should end and saving it to a table in my options database. I understand that the wp_localize_script function is what I want to use in order to output that data to my jQuery plugin. However, I can't seem to connect the final dots.

The code for the jQuery countdown looks like this:

<script> $('.live-countdown').countdown({ date: 'January 1, 2015 13:30:00' }); </script>

I have all of that information stored in my options DB (as an array with month, day, year, and time in the correct format), but I can't seem to figure out how to get it to output in such a way that I can use it here. Can someone explain to me how to use wp_localize_scripts to output my information? I'm still very much learning (both Wordpress and PHP in general) and I've been struggling with this for a few days.

Sorry if it's a repeat question but I've been searching and Googling for a while with no luck. All the tutorials I can find are either unclear or for something slightly different. It seems really simple but I think I just need it explained a little better for my particular situation. Thanks for the help!

Answer 1

You should use wp_localize_script() after enqueuing your JS file that calls the countdown method. I'm assuming you stored the date in an option called date_name like January 1, 2015 13:30:00.

In your case, you are storing it as an array with month, day, year, and time in the correct format, so you should convert it to the January 1, 2015 13:30:00 format.

wp_enqueue_script( 'jsfilename' );
$stored_date = get_option( 'date_name', 'default value' );
// process stored date so that it gets to the January 1, 2015 13:30:00 format
$date_options = array( 'mydate' => $stored_date );
wp_localize_script( 'jsfilename', 'dateopts', $date_options );

Then in your JS file, you call:

$('.live-countdown').countdown({ date: dateopts.mydate });