WP-Canvas Shortcodes with Masonry and Infinite Scrolling

masonry

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:

<script src="../infinite/jquery.infinitescroll.js"  type='text/javascript'></script>

You could do it the proper way in your theme’s functions.php file, something like the below:

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

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-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

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:

<nav class="navigation paging-navigation" role="navigation">

and replace with:

<div id="nav-links" class="navigation paging-navigation" role="navigation">

Then open: plugins/wc-shortcodes/includes/templates/content-excerpt.php

Second line is:

<div id="post-<?php the_ID(); ?>" <?php post_class( $classes ); ?>>

Replace that with:

<div id="post-excerpt" <?php post_class( $classes ); ?>>

Finally open plugins/wc-shortcodes/includes/shortcode-functions.php and change this (Line 1226):

$html .= '<div id="wc-shortcodes-posts-'.$instance.'" data-gutter-space="'.$atts["gutter_space"].'" data-columns="'.$atts["columns"].'" class="' . implode( ' ', $class ) . '">';

to:

$html .= '<div id="wc-shortcodes-posts" data-gutter-space="'.$atts["gutter_space"].'" data-columns="'.$atts["columns"].'" class="' . implode( ' ', $class ) . '">';

That should be about it.  Good luck!

  • Niicaux

    Hi Nick,

    Awesome stuff you got here. I also downloaded WP-Canvas shortcodes and am working with it and have the same need to have infinite scroll implemented into my masonry layout of posts.

    Thank you so much for this, but may I trouble you with a query?

    When you say “Download infinite scroll and place it somewhere on your server…” is there a particular file or the entire folder I have to download?
    In your case, where did you download it to?

    Thank you so much in advance for your help.
    I look forward to hearing from you.

    Cheers,

    Nico

  • Hi Nico,

    Thanks, and nice to see someone getting some help from this!

    Right, “Download infinite scroll….”

    You need the main infinitescroll javscript file, so this is jquery.infinitescroll.js.

    “…..and place it somewhere on your server…”

    So for me it is ‘.talesfromthesaddle.com/shortwaywp/jquery.infinitescroll.js’

    Then you need load/call/include this JS in your document/page. As I have stated above, I used CSS toolbox and load it up with just this:

    Or you can enqueue the script, as detailed above too.

    Let me know if you need more help.

  • Niicaux

    Thanks for the prompt response.
    Let me give it a go and see how it goes.

    Cheers,

    N

  • Niicaux

    Sorry Nick, but can you clarify something here?
    You said you placed it in ‘.talesfromthesaddle.com/shortwaywp/jquery.infinitescroll.js’
    But the location you call the script from seems to be different “../infinite/jquery.infinitescroll.js”
    Or did you actually save that js file it into a directory called “infinite” and not “shortwaywp”? Or am I missing something here?

  • That’s ok, my mistake, I’ve edited the answer above, should be correct.

    You can save it anywhere of course, so long as your link to load the script is amended to suit.

  • Niicaux

    Thanks Nick,
    After I posted that query I just thought let me just give it a try to have the directory name and the reference code with ‘infinite’ and it worked like a charm. I will post the link of my site here when I get it up and running.
    Man you are a life saver.
    Rock on!

    n

  • No probs, hope you got it working in the end?! 🙂

  • Thomas

    This is a really nice idea, but it doesn’t work with me 🙁 . which value have I to put in here? : post__in=” “

  • Hi Thomas….that doesn’t sound quite right, but maybe something has changed in one of the scripts (this was written quite a long time ago). Where are you seeing this “post_in” field?