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>
 10,
'paged' => $paged,
'order' => 'DESC'
);
$posts = new WP_Query($args);

if ($posts->have_posts()):

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

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

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

$image = get_the_post_thumbnail_url( get_the_ID(),"medium'" );
$media = '<img src="'.$image.'" width="100%">';
?>
<div class="grid-item <?php echo $catagory; ?>">
<a href="<?php the_permalink(); ?>">

</a></div>

<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;">max_num_pages ); ?></div>
<div class="next-posts-link alignleft" style="display:none;"></div>
</nav>

</div>

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