I was working on a wordpress website design recently and wanted to show the user’s blog posts using masonry. This was pretty straightforward to achieve using WP-Canvas shortcodes.
However, I also wanted to use infinite scolling and getting this layout to work with that posed to be a bit of a head-scratcher.
Eventually, after much trial and error and a few sleeps dreaming in jQuery land, I did it. Here’s the outcome (demo):
http://www.shortwayround.co.uk/journal/
How to do it:
First off, I’m no programmer, so please expect some rough method! This took me a week, so expect to spend a bit of time on it, but less than I did. You’ll need to have some knowledge of wordpress and some basic coding knowledge.
Install WP-Canvas Shortcodes
If you don’t already have WP-Canvas Shortcodes, get that.
Add Infinite scroll to your server
Download infinite scroll and place it somewhere on your server. https://github.com/paulirish/infinite-scroll
Load the script:
I’m use CSS Javascript toolbox to add styles and scripts to individual pages the old fashioned way, this is not the preferred method for wordpress, but for me it works well, or at least to my liking and I can easily choose which pages the script does and doesn’t load on with simply:
[wc_code]<script src=”../infinite/jquery.infinitescroll.js” type=’text/javascript’></script>[/wc_code]
You could do it the proper way in your theme’s functions.php file, something like the below:
[wc_code]function njs_add_to_the_head() {
wp_register_script( 'infinite-js', get_site_url() . '/infinite/jquery.infinitescroll.js', array('jquery'),'',true ); // Registers the Infinite scroll script
wp_enqueue_script( 'infinite-js'); // Set's up for loading
}
add_action( 'wp_enqueue_scripts', 'njs_add_to_the_head'); //Hooks our custom function into WP's wp_enqueue_scripts function[/wc_code]
Edit posts.js
So the script is loaded but now to tell it how to handle the content. We do by editing the posts.js file within the WP-Canvas plugin:
Find this file: wp-content/plugins/wc-shortcodes/includes/js/posts.js
Open it and look for $(document).ready(function(){ on line 66. Insert the following immediately afterwards, not deleting anything.
[wc_code]$(‘#wc-shortcodes-posts’).infinitescroll({
navSelector : “#nav-links”,
nextSelector : “#nav-links a.next.page-numbers”,
itemSelector : “div#post-excerpt”,
loading: { finishedMsg: “No more Posts to load.”, msgText: “<em>Loading Posts…</em>” },
bufferPx: 750,
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they’re ready
$newElems.animate({ opacity: 1 });
$(‘#wc-shortcodes-posts’).masonry( ‘appended’, $newElems, true );
var $container = $(‘#wc-shortcodes-posts’);
imagesLoaded( $container, function() {
runMasonry(0, $container);
}); //imagesLoaded
});//newElems
}); //infinitescroll[/wc_code]
Add the necessary selectors
Whilst we’ve now got the script loaded and told it what to look for, the output of WP-Canvas shortcodes doesn’t have the necessary <div> IDs/selectors that we need and have stated in the above script. This means we have to edit some of the PHP files of the plugin.
First open: plugins/wc-shortcodes/includes/templates/nav-pagination.php
Find this:
[wc_code]<nav class=”navigation paging-navigation” role=”navigation”>[/wc_code]
and replace with:
[wc_code]<div id=”nav-links” class=”navigation paging-navigation” role=”navigation”>[/wc_code]
Then open: plugins/wc-shortcodes/includes/templates/content-excerpt.php
Second line is:
[wc_code]<div id=”post-<?php the_ID(); ?>” <?php post_class( $classes ); ?>>[/wc_code]
Replace that with:
[wc_code]<div id=”post-excerpt” <?php post_class( $classes ); ?>>[/wc_code]
Finally open plugins/wc-shortcodes/includes/shortcode-functions.php and change this (Line 1226):
[wc_code]$html .= ‘<div id=”wc-shortcodes-posts-‘.$instance.'” data-gutter-space=”‘.$atts[“gutter_space”].'” data-columns=”‘.$atts[“columns”].'” class=”‘ . implode( ‘ ‘, $class ) . ‘”>’;[/wc_code]
to:
[wc_code]$html .= ‘<div id=”wc-shortcodes-posts” data-gutter-space=”‘.$atts[“gutter_space”].'” data-columns=”‘.$atts[“columns”].'” class=”‘ . implode( ‘ ‘, $class ) . ‘”>’;[/wc_code]
That should be about it. Good luck!