Repeater Field
Infinite scroll Advanced Custom Fields Repeater field data with Ajax Load More
In this example:
Ajax Load More will load Repeater field data from Advanced Custom Fields using the ACF extension.
The Repeater field for Advanced Custom Fields allows users to create a set of sub fields which can be repeated over and over again while creating content – Ajax Load More is used to loop over each item in the repeater and display the results with infinite scrolling.
🔥 Use the Search Engine Optimization add-on to create paging URLs of repeater content.
Jeff Edmuson
Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue.
Marcia Craig
Lorem ipsum dolor sit amet, consectetur elit. Donec ullamcorper nulla non metus auctor fringilla.
Jeff Sandburg
Donec ullamcorper nulla non metus auctor fringilla.
Henry Vulkin
Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue.
The following shortcode was used to create the Repeater Field example.
[ajax_load_more preloaded="true" preloaded_amount="4" posts_per_page="4" acf="true" acf_field_type="repeater" acf_field_name="repeater_our_team" container_type="div"]
Note: In this example, repeater_our_team is the name of the ACF Field Group. Ajax Load More will loop over each item in this repeater to build the infinite scroll listing.
The following Repeater Template was used to create the Repeater Field example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<article> <?php $img = get_sub_field('team_member_profile_pic'); $img = $img['sizes']['thumbnail']; ?> <div class="acf-inner"> <?php if ( $img ) { ?> <img src="<?php echo $img; ?>" alt="" /> <?php }?> <div class="details"> <h3><?php the_sub_field('team_member_name'); ?></h3> <p class="entry-meta"> <?php the_sub_field('team_member_position'); ?> </p> <?php the_sub_field('team_member_biography'); ?> </div> </div> </article> |
Note: Don’t forget to use the get_sub_field function when accessing repeater field data.