Masonry style WordPress Gallery without using plugin

Published on January 7, 2015 in Jquery, Php, Wordpress

Nowadays Masonry styled Gallery layouts are very common for websites. There are many third party WordPress plugins for Galleries that either provide their own Gallery or provide styling skins for the default WordPress Gallery.

For the sake of this post we will learn how to apply Masonry Layout to default WordPress Gallery. Below is the code.

CSS

.gallery-columns-0 .gallery-item {
    width: 100%;
}
.gallery-columns-1 .gallery-item {
    width: 100%;
}
.gallery-columns-2 .gallery-item {
	width: 50%;
}
.gallery-columns-3 .gallery-item {
    width: 33.33%;
}
.gallery-columns-4 .gallery-item {
	width: 25%;
}
.gallery-columns-5 .gallery-item {
    width: 20%;
}
.gallery .gallery-item {
	text-align: center;
	float: left;
	padding: 0 15px;
	margin-bottom: 30px;
}

@media all and (max-width:680px) {
	
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item {
	width: 100%;
	padding-right: 0;
}

}

JQuery

var galleries = jQuery(".moods-masonry-gal>.gallery");
if (galleries.length) {
	galleries.each(function(){
		var current = jQuery(this);
		var gal_id = jQuery(this).attr('id');
		current.imagesLoaded( function() {
			current.masonry();
		});
	});
}

PHP

function masonry_scripts() {
	wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array('images-loaded'), '1.0.0', true );
    wp_enqueue_script( 'images-loaded', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'masonry_scripts' );

Note that masonry.pkgd.min.js and imagesloaded.pkgd.min.js should be present in js folder of your active theme.

Join the discussion

  1. Avatar
    Konstantin says:
    January 11, 2017 at 12:30 pm

    JQuery code Where to insert?

Leave a Reply

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

Sagilo - Free Online Project Management tool for software developers

Still using Excel and Word to manage your projects? Switch to Sagilo; a free online app that will allow your team to collaborate, plan and deliver efficiently. Register for free. No credit cards required.

Visit Now

Install Laravel 5 on WAMP Server

Published on August 30, 2015 in Laravel, Php

In this super small tutorial we’ll learn how to install Laravel 5 on WAMP server. It is assumed that you have a basic knowledge of WAMP. I am using Windows 7 Operating system. In case you are using Windows 8 or 10 or even a XP, the installation steps will remain the same. For installing […]

Read Now

Design Patterns in PHP: Factory, Strategy and Singleton

Published on September 29, 2017 in Php

What are design patterns Design patterns are coding strategy followed by developers. It’s just like an architectural plan followed in building houses. As per theory it can defined as “A general solution to commonly occurring problems in software design”. Instead of talking about what Design patterns are let’s have a look at some real world […]

Read Now

Tutorial on creating image captcha in PHP using GD library

Published on July 20, 2014 in Php

There are already a number of free captcha libraries available on web. But as a developer you might want to know (in case you don’t) how the captcha is actually generated. So in this small tutorial we will learn step by step how to generate a captcha image using PHP. Captcha is a string of […]

Read Now

Login with Google Account using PHP

Published on April 11, 2019 in Php

In this article we’ll learn how you can let your app users login with Google Account into your PHP web application using Google PHP Client version 2. It’s assumed that you have already installed composer and are using a version of PHP greater than 5.4. To view the entire code please visit this gist. Create […]

Read Now