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:
PHP
<?php
/*
* 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();
$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 = "" >
</a>
<?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!
Hi Nathan.
Tested your code, and it shows the first X items in my list.
However, when i click on the pagination links, e.g. “animals/1/”, it redirects back to ‘animals’. It’s like WP is stripping out the page id from the url. Any ideas for a solution would be appreciated? Thank-you.
Hi Nathan,
I am facing the same issue. Have a look here: https://core.trac.wordpress.org/ticket/50976
This is something I have spent hours trying to figure out. It’s the new version of wordpress, reverting back to the previous version fixes for now.
Please let me know if you know a way around this, at this point, I’m looking to pay someone to either fix or find another way to code this.
Using gallery field, splitting posts into multiple pages… if you’re interested, my code: https://pastebin.com/jjH71xnF (I know it’s a mess)
Hi Nathan, I sent you an email I think yesterday, hope to get a reply, but if not no worries 🙂
Hi Nathan, Thanks so much for the code! I’ve successfully implemented it on one of my pages with repeater fields but it doesn’t seem to work on another. When I var_dump the variables the values seem to be correct, however, I can’t get the page numbers to display the way the page is currently configured. I’m not sure why they aren’t displaying. Would you have any ideas? Thank you. The site is not yet live, but if needed I can put it on a staging server.
Hi Nathan,
Thanks so much. The page is https://wordpress-projects.website/staging/coast/gallery/coast-salish/. I forgot to mention that it is a custom post type and I think that might be the issue. I’ve managed to get the page numbers to appear, it just doesn’t go to the next page and the URL doesn’t change.
It works on post which have custom field value. Page which have not filled this value breaks and show this == Warning: count(): Parameter must be an array or an object that implements Countable in C:\laragon\www\cpress\wp-content\themes\main\template-parts\content-single-classic.php on line 133
No images found
Can you help ?
I’ve had this code running on several sites for a couple of years. Something in WP 5.5 broke it and I can’t figure out what. Any thoughts? Thanks!
thank you you save my time
This fix worked for me for the recent error in the page reloading the first page items:
if( get_query_var(‘paged’) ) { $page = get_query_var( ‘paged’ ); }
and
‘base’ => get_permalink() . ‘page/%#%’ . ‘/’, ‘format’ => ‘?paged=%#%’,
nice one this works
Hi,
Is there a demo of this anywhere? I have the code handling the number of images correctly, but no pagination is appearing – I guess its supposed to appear at the bottom?