Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMSSQLMySQLPHPSilvaTechnologiesWordpress
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('paged') ) { $page = get_query_var('paged'); } elseif ( 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 &lt; $min) { continue; } // Stop loop completely if $row is higher than $max if($row &gt; $max) { break; } ?-->

<!--?php $img_obj = get_sub_field( 'image' ); ?-->
    <a href="&lt;?php echo $img_obj['sizes']['large']; ?&gt;">
        <img src="&lt;?php echo $img_obj['sizes']['thumbnail']; ?&gt;" alt="Your ALT Tag" />
    </a>

<!--?php endwhile; // Pagination echo paginate_links( array( 'base' =&gt; get_permalink() . '%#%' . '/',
    'base' =&gt; str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' =&gt; '%#%',
    'current' =&gt; max( 1, get_query_var('paged') ),
    'total' =&gt; $pages
  ) );
  ?-->

<!--?php else: ?-->

No images found

 

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 of 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

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

Join the discussion