Can I have that? Thank you!
This Pro tutorial provides the steps to set up "click to load more" posts using Infinite Scroll JS in Bricks builder. https://www.youtube.com/watch?v=6-A0jEPdmQ8 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...
brickslabs.com
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:
Code:
<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:
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:
Code:
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:
Code:
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
