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

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

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.

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

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.

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.

Share:
Share on Facebook0

Share on LinkedIn0Tweet about this on TwitterShare on Google+0Buffer this pageDigg thisShare on Reddit0

Leave a Reply

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

Most Popular Posts

How To Reset resourceID in MODx

Posted on 4 years ago

Bhumi

How to add custom post type in RSS Feed?

Posted on 3 years ago

Bhumi

How To Send Email in MODx

Posted on 4 years ago

Bhumi

How to set Expire Headers using .htaccess?

Posted on 2 years ago

Bhumi

How does CI/CD works on AWS?

Updated 17 years ago

Bhumi

Overview of Amazon Web Services (AWS)

Updated 17 years ago

Bhumi

How to add ColorDots in FullCalender?

Updated 17 years ago

Bhumi

A Beginner’s Guide To Composer

Updated 17 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 1 year ago

Bhumi

The Reader’s Poll – August 2014

Posted on 2 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 2 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 2 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 3 years ago

Bhumi