A user asked in the Bricks Facebook group:
I have a loop of a CPT, showing 10 in a total of 16 posts and a load more button. I need the button text showing as “Load more 6 posts” (16-10). Is it possible with Bricks?
This Pro tutorial shows how a custom dynamic data tag, bl_remaining_posts can be registered that automatically calculates the number of posts not yet displayed in the query loop, both on initial page load and after the Load more button is clicked when using Load more functionality for Bricks' posts query loops.
The dynamic tag can then be used inline in the button text like this:
Load more ({bl_remaining_posts})
This also works when there are multiple query loops on a given page by specifying the Bricks ID of the element on which query loop is enabled.
{bl_remaining_posts:ELEMENT_ID}
Step 1
Install and active Bricks child theme if it's not already active.
This can be done at any stage - even if your WordPress site is already developed and live.
Step 2
Edit child theme's functions.php.
Below
wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
add
wp_enqueue_script(
'bl-load-more-count',
get_stylesheet_directory_uri() . '/js/load-more-count.js',
array( 'bricks-scripts' ),
filemtime( get_stylesheet_directory() . '/js/load-more-count.js' ),
array( 'strategy' => 'defer' )
);
Step 3
Create a file named load-more-count.js in the js directory (it won't be present by default, create it) inside the child theme folder.
Add this code:
This is a BricksLabs Pro tutorial.
For full access login below or create your BricksLabs Pro account
