How can I create a load more button with query loop?

How To
1

Version: 1.3.7
I’m trying add a load more button at the bottom of a query loop.

I have a template item of the loop that I load with this function:


function sal_render_bricks_template($template_id){
    return (new Templates())->render_shortcode(array("id"=>$template_id));
}

I 've triyed:

  • make a rest api call to render the posts. But the render_shortcode from “Bricks/Templates” class does not render the content, yet the html structure.

  • Do the same with an ajax call. But it renders the entire page

thanks

2

Hello @salwebs

The Load More feature is something we have already in Bricks ideas board (https://bricksbuilder.io/ideas/#3111). Make sure you upvote it and comment if you would like to add some more details.

It is rather complex to explain in a post how to achieve the Load More feature with custom code, but you would need to have a load more button which when clicked would trigger an ajax call to fetch the next page of posts, and then append that HTML to the end of the list. The ajax call needs to carry the page number and you would need to modify the query (Filter: bricks/posts/query_vars – Bricks Academy) before rendering the template.

Regarding this part of the code:

I strongly suggest you replace that code by the following because we might change the internal class methods one day, and that will break your code:

function sal_render_bricks_template($template_id){
    return do_shortcode('[bricks_template id="'.$template_id.'"]');
}
2 Likes
3

Perfect, thanks! :ok_hand: :ok_hand:

4

I was wondering if you are aware that you can do it with the new interactions on Bricks Builder. You simply add a button, select internactions → Trigger = Click, Action = Load more (Query loop), Query= the related query.

image
image318×652 17.3 KB

Bricks interactions are very powerful!

10 Likes
5

Thanks for this tip, was able to add ‘Load More’ button in the query loop.

How do i change the cursor to indicate that the button is clickable when hover. In the current state since the button doesn’t contain any link the cursor remains normal when hover.

6

button > styles > layout > cursor > pointer

2 Likes
7

This works! thanks @wplit

8

I have 1 question.
$args = array(
‘post_status’ => ‘publish’,
‘post_type’ => ‘jobs’,
‘posts_per_page’ => ‘2’,
‘order’ => ‘DESC’,
‘s’ => ‘’,
);
$query = new \WP_Query($args);
$loop_id = Query::is_any_looping();
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo “

”;
$title = get_the_title();
echo do_shortcode(“[bricks_template id="$template_id"]”);
echo “
”;
wp_reset_postdata();
}
}
my template have element heading “dynamic data” {post_title} by After passing the above query, my template only retrieves the title of the page but does not retrieve the title of the query

9

@wplit Can you please help me how to load the posts with some smooth transitions with the above interaction method
button, select internactions → Trigger = Click, Action = Load more (Query loop), Query= the related query.

10

@wplit @timmse how do we hide the load more button if the query doesn’t have more posts to load, either on-load, or after clicking the button?

11

Happens automatically for me. The class ‘brx-load-more-hidden’ is added, which has display:none.

If it’s not hiding, maybe you have some other display style on the button that is overriding the display:none?

12

Thanks for sharing this. It’s just what I needed.

13

yeah it happens to me too

14

Sorry to bump but I just debugged my issue regarding the load more interaction on a button.

Like me, your load more button probably was a link with ‘#’ added to the button.

Once I removed the ‘#’ href and turned it into a button, everything works as it should.

Only issue I am facing is now an accessibility one, in that if a user keyboard navigates to press the load more button after the first set of X items, the focus stays on the button, rather than focusing to the X+1 item in the query which would be desirable. I don’t think Bricks natively handles this?

@wplit @timmse

15

Yes! Just tried it and it works perfectly — thanks a ton for the tip. Bricks interactions really are next level :fire: