I am trying to include a plugin from github (https://github.com/rendro/countdown) the right way on my wordpress site. After hours of research in the codex and here on stack I still cannot find a way to make it work.
If I use the default method:
1) Adding these lines to the <head> of my header.php file:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
/path/to/jquery.countdown.js
2) Initializing the plugin with my desired configuration in between </head> and <body> in my header.php file, in this case:
$(function() {
var endDate = "November 30, 2015 10:00:00";
$('.countdown.styled').countdown({
date: endDate,
render: function(data) {
$(this.el).html("" + this.leadingZeros(data.days, 2) + " days" + this.leadingZeros(data.hours, 2) + " hours" + this.leadingZeros(data.min, 2) + " minutes" + this.leadingZeros(data.sec, 2) + " seconds");
}
});
});
3) And then calling the plugin in my html file:
<?php if(is_front_page() ) { ?>
</div>
<?php } ?>
It works perfectly !
If, however, I try doing it the right way
(If I understand well, wordpress ships with jQuery by default, by using the default method I'm making the user download jquery twice which augments my loading time as well, right ?)
Which means enqueuing jquery and then my script in my functions.php file like so:
wp_enqueue_script('jquery');
function add_cdtoevent() {
wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery') );
}
And then repeat step 2) and 3) of the default method, it simply does not work ! I tried wrapping my jquery code in step 2) just like this:
jQuery(document).ready(function( $ ) {
// $ Works! You can test it with next line if you like
// console.log($);
});
But it still does not work.
If anybody could help, it would truly be greatly appreciated !
0 comments:
Post a Comment