Click-type Infinite Scroll in Bricks Builder

This Pro tutorial provides the steps to set up “click to load more” posts using Infinite Scroll JS in Bricks builder.

Step 1

Edit your Template/Page with Bricks and add a list/grid of posts using either the Posts element or Query Loop.

In this example, let’s use the Query Loop using CSS Grid as detailed in our previous tutorial here.

Step 2

Add a Pagination element alongside and below the Query Loop parent element.

Select the element represented by your Query Loop.

Set the Pagination element’s Display to none.

Add a Container under the Pagination.

Add a Code element inside the Container having:

<div class="page-load-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>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>

<p><button class="view-more-button">View more</button></p>

Step 3

Create a directory called assets inside your child theme directory.

Create a directory called js inside the assets directory.

Upload infinite-scroll.pkgd.min.js to the above js directory.

Create a file named say, infinite-scroll-init.js in the same location having this code:

document.addEventListener("DOMContentLoaded", (event) => {
  var infScroll = new InfiniteScroll("#featured-posts", {
	path: "ul.page-numbers a",
	append: ".brxe-pduwpw",
	hideNav: ".brxe-pagination",
	button: ".view-more-button",
	// using button, disable loading on scroll
	scrollThreshold: false,
	status: ".page-load-status",
  });
});

Replace #featured-posts with the selector of your repeating Div/Container’s parent element.

Replace brxe-pduwpw with the class for each post.

path: selector for each of the pagination link. Note that specifying this as .page-numbers isn’t going to work because the ul also has the same class.

append: selector for each post

Step 4

Settings → PAGE SETTINGS → CUSTOM CODE → Custom CSS:

.page-load-status {
	display: none; /* hidden by default */
	/* padding-top: 20px;
	border-top: 1px solid #DDD; */
	text-align: center;
	color: #777;
}

.loader-ellips {
	font-size: 20px; /* change size here */
	position: relative;
	width: 4em;
	height: 1em;
	margin: 10px auto;
}

.loader-ellips__dot {
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 0.5em;
	background: #555; /* change color here */
	position: absolute;
	animation-duration: 0.5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
	left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
	from { transform: scale(0.001); }
	to { transform: scale(1); }
}

@keyframes slide {
	to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
	animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
	animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
	animation-name: reveal;
	animation-direction: reverse;
}

.view-more-button {
	background-color: #ddd;
	width: 100%;
	padding: 20px;
  text-align: center;
	border: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.view-more-button:hover {
	background-color: #333;
	color: #fff;
}

Step 5

Edit child theme’s functions.php.

Inside the function hooked to wp_enqueue_scripts, add:

if ( is_page( 'sample-page' ) ) {
	wp_enqueue_script( 'infinite-scroll', get_stylesheet_directory_uri() . '/assets/js/infinite-scroll.pkgd.min.js', '', '4.0.1', true );
	
	wp_enqueue_script( 'infinite-scroll-init', get_stylesheet_directory_uri() . '/assets/js/infinite-scroll-init.js', ['infinite-scroll'], '1.0.0', true );
}

Replace is_page( 'sample-page' ) as needed.

If you would like to set this up on the site’s static front page, you’d change it to: is_front_page()

Reference

https://codepen.io/desandro/pen/OJRvLxG