WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

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:

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!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

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

18 thoughts on “How to add Pagination on an Advanced Custom Fields Repeater

  1. 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.

    1. 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 code in the tutorial which works with the latest versions of both PHP and WordPress

  2. Hi Dave,

    Did you try resetting the permalinks after making the changes by going to Settings -> Permalinks?

    Simply navigate to this page and click Save Changes button and check again. If this doesn’t resolve the issue, let me know and I will look into it further for you.

  3. 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)

  4. 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.

    1. Okay, if you want to use Numeric permalink structure, you will need to add the following code to your functions.php file:

      
      add_filter('redirect_canonical','pif_disable_redirect_canonical');
      
      function pif_disable_redirect_canonical($redirect_url) {
          if (is_singular()) $redirect_url = false;
      return $redirect_url;
      }
      

      You can also change is_singular() to is_singular(YOUR-CPT) if you just want to apply the code for this CPT.

      Basically what was happening was this function was being overridden by the default pagination of WordPress but redirecting back to the first page.

      To override this, we just needed to tie into the redirect_canonical hook and override it for your post type.

  5. 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 ?

    1. Does it work if you wrap the image with:

      
      if(get_sub_field( 'image' )) { 
          // code here
      }
      

      Let me know. Seems the issue is related to no image being available.

  6. 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!

  7. 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=%#%’,

Join the discussion

Related Posts

Related - ACF Repeater Load More using AJAX

Wordpress / 21st June 2021

ACF Repeater Load More using AJAX

Read More Related - Our Top 10 Used Plugins For WordPress – 2021 Edition

Wordpress / 20th December 2020

Our Top 10 Used Plugins For WordPress – 2021 Edition

Read More