Back to Top

How to create Masonry Moving Boxes in WordPress?

Masonry MovingBoxes in Wordpress

Masonry is a dynamic grid layout plugin for jQuery. Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Here, is the steps to develop Masonry Slider which slides the boxes using jQuery in WordPress.

Read: To get Last auto increment id in WordPress

Step 1: First of all include js and css files in a header.For that place below code into function.php

add_action('wp_head','include_head');

// Replace css and js path with desired one
function include_head(){ ?>
    
    
    
     

Step 2: place below line of code into function.php which will generate custom post type for slider.

/*action hook to generate custom post type*/
 _x('Masonry Slider', 'Masonry_Slider'),
                 'singular_name' => _x('Masonry Slider Item', 'post type singular name'),
                 'add_new' => _x('Add New Image', 'Masonry Slider item'),
                 'add_new_item' => __('Add New Masonry Slider Item'),
                 'edit_item' => __('Edit Masonry Slider Item'),
                 'new_item' => __('New Masonry Slider Item'),
                 'view_item' => __('View Masonry Slider Item'),
                 'search_items' => __('Search Masonry Slider'),
                 'not_found' => __('Nothing found'),
                 'not_found_in_trash' => __('Nothing found in Trash'),
                 'parent_item_colon' => ''
       );
$args = array(
             'labels' => $labels,
             'public' => true,
             'publicly_queryable' => true,
             'show_ui' => true,
             'query_var' => true,
             'menu_icon' => plugins_url('/images/', __FILE__) . 'masonry_menu_icon.png',
             'rewrite' => array('slug'=>'videos'),
             'capability_type' => 'post',
             'hierarchical' => false,
             'menu_position' => null,
             'supports' => array('title','editor','thumbnail','custom-fields')
        );
register_post_type( 'masonry' , $args );
} ?>

Above Code is to generate custom post type to create own categories, post and images for a slider.You can separate images for slider by category.

Step 3: Now , It's turn to write code for displaying a slider into front-end. You can write below code to the page you want to display.

replace with your desired parent category.
echo '
'; foreach ($cats as $cat) : $args = array( 'category__in' => array($cat->term_id), 'post_type' => 'Masonry_Slider' ); $my_query = new WP_Query($args); if ($my_query->have_posts()) : echo '
'; echo '
'; echo ''; query_posts( 'post_type=our_work&order=ASC&orderby=ID'); while ($my_query->have_posts()) : $my_query->the_post(); $cls =get_post_meta($my_query->post->ID,'img_type',true); $attachment = get_posts( array( 'post_type' => 'attachment', 'posts_per_page' => 1, 'post_parent' => $my_query->post->ID, 'exclude' => get_post_thumbnail_id() ) ); ?>
class="box photo " id="ID;?>" ">

Step 4:Next is to place JavaScript code for calling masonry which removes gap between images.

$('.mymasonryclass').each(function(index, value){
          $(this).masonry({
                           itemSelector : '.box',
                           isAnimated: true,
                           isFitWidth: true,
                           appendCallback: true
         });
  $(this).masonry('reload');
});

Above code is rearrange image layout so which remove the gap between images whether is vertical or horizontal.

Step 5: Last but not the least, This step is for css so your slider looks proper.

.box{
    width:155px;
    height:155px;
}
.box.w {
    width: 315px;
}
.box.h {
    height: 315px;
}
.box.wh {
    width: 315px;
    height: 315px;
}

You need to change width and height of CSS as per your images in slider, As an example, In .box w containing width only because we have landscape image means width of images different.

According to css, You need to create one custom field img_type and add value like w for landscape image, h for portrait image and wh for square box.

That’s it. your masonry slider is ready. Now you can view in frontend ?.

Hope this helps someone else out.As always, thanks for reading. Don't Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

GoTo statement in PHP

Posted on 7 years ago

Bhumi

The Readers’ Poll – February 2013

Posted on 6 years ago

Bhumi

How to use Replace function in MySQL

Posted on 7 years ago

Bhumi

Steps To speed up Eclipse IDE

Posted on 6 years ago

Bhumi

How to Import Users in MODx from CSV file

Posted on 6 years ago

Bhumi

Hello world

Updated 1 week ago

Nick Carter

In depth Understanding of Laravel Core

Updated 2 months ago

Bhumi

ECMAScript 6 New Features – 2

Updated 1 year ago

Bhumi

The Reader’s Poll – June 2015

Posted on 4 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 4 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 5 years ago

Bhumi