One of of the updates made to the infinite scroller component in OxyExtras v1.3.0 was to add support for using with libraries such as Isotope & Masonry.

So if you’ve added a custom solution for filters using isotope, or are applying your own masonry layout using Easy Posts or Repeaters, the infinite scroller component will respect the layouts when loading the new posts.

For the most part this will work out of the box, as long as you choose the correct library that you’re using from the settings.

Note, I feel I must point out that even though this was added as a feature, after being requested, it’s not actually something I recommend for too many use cases. To quote David DeSandro who is behind both the infinite scroll library and isotope “..just because even though you can use these features together, maybe you should not”

In other words, using both filtering and limiting the posts visible by infinite scroll or pagination, although it’s possible. If there aren’t many posts in each category/filter result, it can sometimes lead to a confusing experience for the user. For example if the next batch of posts to be loaded don’t fit the filter criteria, nothing will show, which can be odd. Depending on what you’re creating, a dedicated facet search/filter plugin may work better for your use case.

Isotope filters & infinite scroll

If you’re adding filters to a repeater component using Isotope, (assuming you’re using the same method as shown in this tutorial.. Using Isotope To Sort & Filter Posts In WordPress With Oxygen), there’s just one extra step to ensure the filters will function correctly.

In Elijah’s Javascript code, on lines 12-17, he’s adding the categories as a class on the elements so they can be correctly filtered.

The classes are being added when the page first loads, when the document is ready.

We just need this to happen again when the new posts have loaded

The solution is to add this.. (using the append.infiniteScroll event to trigger the same classes to be added once the new posts are appended)

jQuery('.grid').on( 'append.infiniteScroll', function( event, body, path, items, response ) {
    
    jQuery('.category').each( function() {
    
      jQuery(this).closest('.grid-item').addClass(jQuery(this).text().toLowerCase());
      jQuery(this).remove();

    });
    
  });

That’s it. The full code, adding this part to Elijah’s is here..

https://gist.github.com/wplit/7e4e38528475ed52140fac5ecdf4de62

Keep up to date with new tutorials, information on new features & example use cases.

Subscribe