How to use Masonry in WordPress

Shortlink:

Hi, Today i will show with you how to enable masonry or how to use Masonry in your WordPress website.

What is Masonry?

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Demo

 

It’s very easy work, We know if i design html css template then i need to call masonry js in my html template, but if i want to use in WordPress then i don’t need masonry js call, because already WordPress has been called in WordPress core file, but default system is disable masonry, we just need to enable masonry, so now i will show how to enable masonry in your WordPress website. just open your functions.php file in your theme folder, then copy and past below code in your functions.php file then save.

function wp_masonry() {
wp_enqueue_script( 'jquery-masonry', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wp_masonry' );

Now you WordPress Masonry is enabled.

How to use Masonry?

jQuery('#container').masonry({ singleMode: true });

Or

jQuery('#container').masonry({ columnWidth: 200 });

You can get more resource about masonry this link: Masonry

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!




%d bloggers like this: