-1

How to implement masonry layout for displaying posts in wordpress?

I want to display my posts in a masonry grid layout

This is the code i have tried in functions.php

add_action( 'wp_enqueue_scripts', 'site_scripts' );

function site_scripts() {
wp_enqueue_script('masonry');
wp_enqueue_script( 'site-script', get_template_directory_uri() . '/js/script.js', array(), false, true );

}

In my page i added the following code

<div class="grid">
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-1.jpg' ?>">
</div>
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-2.jpg' ?>">
</div>
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-3.jpg' ?>">
</div>
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-4.jpg' ?>">
</div>
    `enter code here`<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-5.jpg' ?>">
</div>

I added the following javascript

jQuery(function($) {
// init Masonry
var $grid = $('.grid').masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: 400
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
}); });

But i am not getting it in a masonry layout instead it is just displaying downwards one after the other.

Can someone help me?

savana
  • 3
  • 3

1 Answers1

0

TIL that WordPress includes Masonry as core. After taking a quick look it actually includes 2 (native Javascript) and jQuery - you are loading the native Javascript - change:

wp_enqueue_script('masonry');

to:

wp_enqueue_script( 'jquery-masonry' );

For reference, here's the page that lists all Default Scripts Included and Registered by WordPress

RustyBadRobot
  • 517
  • 3
  • 13