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.

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

An Introduction to Kubernetes

Posted on 2 years ago

Bhumi

Top 10 JavaScript Charting Libraries

Posted on 3 years ago

Bhumi

How to get Current URL in WordPress?

Posted on 4 years ago

Bhumi