Support » Developing with WordPress » Load Masonry JS library only on blog page

  • Resolved Indent

    (@indent)


    I’m trying to get the WP core Masonry JS library to load only when I need it, not on the entire site, because on pages where Masonry is not used, imagesLoaded.js generates an error;

    uncaught TypeError: Cannot read property ‘length’ of null
    at f (imagesloaded.min.js?ver=3.2.0:1)
    at new g (imagesloaded.min.js?ver=3.2.0:1)
    at g (imagesloaded.min.js?ver=3.2.0:1)
    at (index) :173

    This is what I have in my function.php, and it works just fine, except for the error I get on all none index.php:

    /**
     * Add WP core Masonry Library.
     */
    if ( ! function_exists('slug_scripts_masonry') ) :
    if ( ! is_admin() ) :
    function slug_scripts_masonry() {
        wp_enqueue_script('masonry');
        wp_enqueue_style( 'masonry', get_template_directory_uri() . '/inc/masonry.css' );
    }
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
    endif; //! is_admin()
    endif; //! slug_scripts_masonry exists
    
    /* Initialize Masonry layout */
    if ( ! function_exists( 'slug_masonry_init' )) :
    function slug_masonry_init() { ?>
    <script>
        //set the container that Masonry will be inside of in a var
        var container = document.querySelector('#masonry-loop');
        //create empty var msnry
        var msnry;
        // initialize Masonry after all images have loaded
        imagesLoaded( container, function() {
            msnry = new Masonry( container, {
                itemSelector: '.masonry-entry'
            });
        });
    </script>
    <?php }
    add_action( 'wp_footer', 'slug_masonry_init', 777 );
    endif; // ! slug_masonry_init exists

    What I want is to load the Masonry script and layout only on my index.php, i.e. only when is_home.

    I’ve tried this, but the Masonry layout is absent:

    if ( is_home() ) {
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
    }

    Settings > Reading is set to a static front-page and blog page. I’m using WP 4.9.8.

    Any thoughts? Thanks.

    • This topic was modified 1 year, 2 months ago by Indent.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Steve Stern

    (@sterndata)

    Support Team Volunteer

    You might try adding a test for is_archive()

    https://codex.wordpress.org/Function_Reference/is_archive

    Tested this with no luck. Masonry layout breaks, just a single column.

    if ( is_archive() ) {
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
    }

    and

    if ( is_home() || is_archive() ) {
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
    }
    Moderator bcworkz

    (@bcworkz)

    Don’t conditionally add_action(). The is_*() functions are not valid in that context. Instead conditionally call wp_enqueue_script() within your callback (slug_scripts_masonry()) that is unconditionally added. The is_*() functions should be valid by the time ‘wp_enqueue_scripts’ fires.

    Thanks a lot.

    That worked very well, but it still throws an error; “Uncaught ReferenceError: imagesLoaded is not defined at (index) :174” on the other pages.

    Is that something I should just ignore?

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Load Masonry JS library only on blog page’ is closed to new replies.