Create a Masonry Layout on the Home/Blog Page in WordPress
WordPress already comes with Masonry either as pure Javascript or a jQuery plugin, here is how you can style a home blog page in a Masonry format with 3 columns.
Enqueue the built in WordPress jQuery Masonry script and create a initiate file which targets our .home .entry posts.
| <?php | |
| //Masonry load scripts | |
| function wpb_masonry_scripts_styles() { | |
| wp_enqueue_script ( 'jquery-masonry'); | |
| wp_enqueue_script ( 'masonry-init' , get_stylesheet_directory_uri() . '/js/masonry-init.js', array('jquery-masonry'), '1', true ); | |
| } | |
| add_action( 'wp_enqueue_scripts', 'wpb_masonry_scripts_styles' ); |
| // Settings Masonary | |
| jQuery( document ).ready( function( $ ) { | |
| $( '.content' ).masonry( );//targets the posts container | |
| } ); |
Add some CSS style for the posts, here I am setting full width on smaller devices below 768px
| .home .entry { | |
| background: #f8f9fa; | |
| margin: 0 1.5% 30px !important; | |
| padding: 3%; | |
| width: 100%; | |
| } | |
| /* 3 Up on devices ipad portrait plus */ | |
| @media only screen and (min-width: 768px) { | |
| .home .entry { | |
| width: 30%; | |
| } | |
| } |
The pagination is an issue in Genesis as it is also masonified (don’t know if that is a legit term) because it shares the same container as the posts – here is a jQuery/CSS hack on that.
| //shift pagination out of container | |
| jQuery(function( $ ){ | |
| $('.archive-pagination').insertAfter(".content-sidebar-wrap"); | |
| }); | |
| //ref- http://api.jquery.com/insertafter/ |
| /*override masonry*/ | |
| .archive-pagination { | |
| position: relative !important; | |
| top: 0 !important; | |
| } |
Loading via javascript
You can also load via javascript only method which negates the need for jQuery
| <?php | |
| //Masonry load scripts | |
| function wpb_masonry_scripts_styles_alt() { | |
| wp_enqueue_script ( 'masonry'); //jqueryless | |
| } | |
| add_action( 'wp_enqueue_scripts', 'wpb_masonry_scripts_styles_alt' ); | |
| //Masonry Style javascript | |
| function wpb_js_masonry() { ?> | |
| <script> | |
| var container = document.querySelector('.home .content'); //set container | |
| var msnry; | |
| // initialize Masonry after all images have loaded | |
| imagesLoaded( container, function() { | |
| msnry = new Masonry( container, { | |
| itemSelector: '.entry', //set target | |
| }); | |
| });</script> | |
| <?php | |
| } | |
| add_action( 'wp_footer','wpb_js_masonry', 20);//add priority to push it below masonry script |