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

Adding WordPress 3.5 Media uploader to plugin / theme’s setting page

Published on November 16, 2013 in Jquery, Wordpress

WordPress 3.5 media uploader is a lot different from the previous WordPress versions. Unlike the previous the 3.5 media uploader can be added with just three to four lines of code making it very easy to be used in our plugin’s or theme’s setting page.

Read Now

Highlight searched terms in WordPress search results

Published on July 15, 2015 in Css, Php, Wordpress

You can make your WordPress blog more user friendly by highlighting the search terms on Search page when user searches for something. By default WordPress search template is designed to show only the page title and excerpt. Unless and until the theme provides this feature out of the box, the searched terms are not highlighted […]

Read Now

Creating a simple responsive wordpress theme from scratch using Twitter Bootstrap: Part 2

Published on July 12, 2015 in Wordpress

In the last part of this tutorial we started with our theme with just two files: index.php and style.css. What we got was a terrible looking website that looked like a notepad text editor. In this part we are going to style our theme to give it a professional look. Below is what it is […]

Read Now

Install Composer on Windows and WAMP Server

Published on August 30, 2015 in Laravel, Php

Composer is a dependency manager tool. Nowadays every other PHP package available out there is using composer for installing. Gone are the old days when developers use to require the required files for including a package. With composer you just need to add the package name in composer.json and composer will not only download the […]

Read Now