How to add Pagination on an Advanced Custom Fields Repeater

Edit: It seems the code stopped working either from the latest version of PHP or one of the most recent WordPress versions. We have updated the below code which works with the latest versions of both PHP (7.4) and WordPress (5.5)

Okay, so it goes without saying that the Advanced Custom Fields plugin is an amazing plugin, one in which we pretty much use on every website we build. It becomes even more powerful with the Repeater Field add-on. If you’re like us, then you probably already have the Advanced Customer Fields Pro version which we would highly recommend if you don’t own it already.

One request that we had was to add pagination since the repeater values grew much larger than expected. Today, we will show you a method to add pagination to the results when you display them to the user.

In the example below, we will paginate a Repeater image gallery which is mapped to a custom field name image_gallery which contains a subfield called image which is an image object. Our repeater will be displayed on a custom page template with the URL of /gallery.

In our example, ten images will be displayed per page, and pagination links will allow the user to navigate between the gallery’s pages at pretty URLs such as /gallery/2/, /gallery/3/ and so on. Right, so let’s get cracking!

In your page template:


 * Paginatation on Advanced Custom Fields Repeater

if( get_query_var('page') ) {
    $page = get_query_var( 'page' );
} else {
    $page = 1;

// Variables
$row              = 0;
$images_per_page  = 10; // How many images to display on each page
$images           = get_field( 'image_gallery' );
$total            = count( $images );
$pages            = ceil( $total / $images_per_page );
$min              = ( ( $page * $images_per_page ) - $images_per_page ) + 1;
$max              = ( $min + $images_per_page ) - 1;

// ACF Loop
if( have_rows( 'image_gallery' ) ) : ?>

<?php while( have_rows( 'image_gallery' ) ): the_row();


    // Ignore this image if $row is lower than $min
    if($row < $min) { continue; }

    // Stop loop completely if $row is higher than $max
    if($row > $max) { break; } ?>

<?php $img_obj = get_sub_field( 'image' ); ?> <a href="<?php echo $img_obj['sizes']['large']; ?>">
    <img src = "<?php echo $img_obj['sizes']['thumbnail']; ?>"
alt = "" >

<?php endwhile;

  // Pagination
  echo paginate_links( array(
    'base' => get_permalink() . '%#%' . '/',
    'format' => '?page=%#%',
    'current' => $page,
    'total' => $pages
  ) );

<?php else: ?>

No images found

    <?php endif; ?>

And there we have it, pretty simple huh? This technique will also work on Custom Post Type single templates. Your pagination permalinks will have the format /post-type/post-slug/2/.

Along with this, you will need to add some styling but we’ll assume your pretty capable with that part.

Did this help? Do you need any assistance getting this to work? Drop a comment below and we’ll be in touch!


Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share