First off I always seem to have trouble getting my JS to work with WP. Currently I need some help figuring out what is going wrong with my javascript and ultimately what I am doing wrong. I have this code:
(function($) { // This works on WP site and on CodePen // $("p.click-me").click(function(){ // alert("The paragraph was clicked."); // }); // Masonry Code $('#posts').masonry({ itemSelector : '.item' }); $('#main #posts').masonry({ itemSelector : '.item' }); // This works on CodePen but not on WP site $("p.click-me").click(function(){ alert("The paragraph was clicked."); }); })(jQuery); The masonry script is enqueued via the function file like so:
wp_enqueue_script( 'ccd-jquery', ‘//cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js',true); Then my script is next:
wp_enqueue_script( 'ccd-javascripts', get_template_directory_uri().’/js/ccd-javascripts.js',array(),'1.0',true); If I do the alert above the masonry code it works, however if I do it below it will not on the Wordpress site. However on my CodePen, it will work either way.
Can someone please help explain to me what I am doing wrong and how to fix this?
--Update-- Based on the feedback from cybmeta I revised my enqueue to be like so:
wp_enqueue_style( 'template-css', get_template_directory_uri().'/css/template.css'); //CDN Load wp_enqueue_script( 'ccd-bootstrap', '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js', array('jquery') ,true); wp_enqueue_script( 'ccd-respond', '//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js', array('jquery') ,true); // wp_enqueue_script( 'ccd-jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js',true); //Not using this since WP loads already // Masonry script depends on jQuery (already registered by WordPress) wp_enqueue_script( 'masonry', '//cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js', array('jquery') ); // ccd-javascripts depends on jQuery and the "masonry" script wp_enqueue_script( 'ccd-javascripts', get_template_directory_uri().'/js/ccd-javascripts.js', array('jquery', 'masonry')); But it still isn't working correctly on the WP site. Instead of doing what its supposed to it stacks them all in 1 column. Changing the width of the column has no effect.
