Ajax Load More and Masonry JS in WordPress

I have tried to get the plugin: Ajax Load More to work with Masonry JS.
I used this example.

But I just cant get it to work.

The function.php in my theme:

function pipspop_scripts() {
wp_enqueue_style( 'pipspop-style', get_stylesheet_uri() );

wp_enqueue_script( 'pipspop-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

wp_enqueue_script( 'pipspop-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

wp_enqueue_script( 'pipspop-masonry',   get_template_directory_uri() . '/js/masonry.pkgd.min.js',       array(), true );
wp_enqueue_script( 'pipspop-imageld',   get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js',  array(), true );
wp_enqueue_script( 'pipspop-blog-js',   get_template_directory_uri() . '/js/blog.js',                   array(), true );


if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'pipspop_scripts' ); 

The blog.js file:

$(function() {
  var masonryInit = true; // set Masonry init flag
  $.fn.almComplete = function(alm){ // Ajax Load More callback function
    if($('#masonry-grid').length){
      var $container = $('#masonry-grid ul'); // our container
      if(masonryInit){
        // initialize Masonry only once
        masonryInit = false;
        $container.masonry({
          itemSelector: '.full-image'
        });         
      }else{
          $container.masonry('reloadItems'); // Reload masonry items after callback
      }
      $container.imagesLoaded( function() { // When images are loaded, fire masonry again.
        $container.masonry();
      });
    }
  };
})(jQuery);

I get “Uncaught ReferenceError: jQuary is not defined” and I have tried some random ways to get that error away but I’m not a JS wizard so I have no idea what’s the best way to do this in WordPress.

The template and shortcode are the same as in the example up top.

Read more here: Ajax Load More and Masonry JS in WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *