Infinite Scroll, Isotope And Masonry WordPress Blog

Infinite scrolling on blogs has become every popular recently, there are many plugins out there that can provide this functionality, but if you are building a custom theme sometimes this isn’t possible.

Below is an example of how I implemented the infinite scroll and isotope JS packages into a custom theme.

Step 1

Include both infinite scroll and isotope into your file (links below).

Both JS packages are kindly provided by Metafizzy

https://infinite-scroll.com/

https://isotope.metafizzy.co/

Step 2

Add CSS. the layout this example is based on is a 3 column masonary vertical layout (example)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }

body {
font-family: sans-serif;
}

/* ---- isotope ---- */

/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
width: 33.333%;
}

.grid-item {
float: left;
display: inline-block;
}

.grid-item img {
display: block;
max-width: 100%;
}
.gutter-sizer{
width:0.5%;
}

Step 3

Add HTML and php. As this is an example for WordPress I have included the loop to fetch the posts.

In this example I have included the filter feature that is in isotope. The filter works on the classes that are attached to the divs around the blog posts. I have added the classes based on categories of the posts, the slugs of the categories are the class names.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="button-group filter-button-group">
            <button data-filter="*">Show All</button>
<button data-filter=".news">News</button>
<button data-filter=".web">Web Sites</button></div>
<!--?php
       //loop for paged blog posts
       if ( get_query_var( 'paged' ) ) { $paged = get_query_var( 'paged' ); }
       elseif ( get_query_var( 'page' ) ) { $paged = get_query_var( 'page' ); }
       else { $paged = 1; }

       $args = array(
           'posts_per_page' =--> 10,
'paged' =&gt; $paged,
'order' =&gt; 'DESC'
);
$posts = new WP_Query($args);

if ($posts-&gt;have_posts()):

echo '
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
';

while($posts-&gt;have_posts()): $posts-&gt;the_post();
$catagory = "";
$cats = get_the_category( $posts-&gt;ID);

//concat catagories slugs for filter
foreach($cats as $cat){
$catagory .= $cat-&gt;slug." ";
}

$image = get_the_post_thumbnail_url( get_the_ID(),"medium'" );
$media = '<img src="'.$image.'" width="100%">';
?&gt;
<div class="grid-item <?php echo $catagory; ?>">
<a href="&lt;?php the_permalink(); ?&gt;">
<!--?php echo $media; ?-->
</a></div>
<!--?php endwhile; ?-->
<div class="scroller-status">
<div class="loader-ellips infinite-scroll-request">
                        <span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span></div>
</div>
<nav class="pagination">
<div class="prev-posts-link alignright" style="display:none;"><!--?php echo get_next_posts_link( 'Older Entries', $featured--->max_num_pages ); ?&gt;</div>
<div class="next-posts-link alignleft" style="display:none;"><!--?php echo get_previous_posts_link( 'Newer Entries' ); ?--></div>
</nav>

</div>
<!--?php else: endif; ?-->

Step 4

The last part of the example is the JQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$('.grid').imagesLoaded(function () {

var $grid = $('.grid');

$grid.isotope({
itemSelector: '.grid-item',
percentPosition: true,

masonry: {
columnWidth: '.grid-sizer'
}
});

var iso = $grid.data('isotope');

$grid.infiniteScroll({
path: 'a.pagination__next',
append: '.grid-item',
debug: true,
status: '.infinite-scroll-request',
outlayer: iso
}
);

// filter items on button click
$('.filter-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({filter: filterValue});
});
});

If you have any questions please leave a comment and I will get back to you.

Please have a look at our other examples Click Here