ACF pagination for repeater field

The code snippet provided below demonstrates how to implement pagination for a repeater field created using the Advanced Custom Fields (ACF) plugin in WordPress. This functionality can be useful when you have a repeater field with a large number of items and you want to split them into multiple pages for better user experience.

<?php
function wpsnippets_acf_repeater_pagination($repeater_field, $items_per_page = 5) {
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $offset = ($paged - 1) * $items_per_page;

    $total_items = count(get_field($repeater_field));
    $total_pages = ceil($total_items / $items_per_page);

    $items = array_slice(get_field($repeater_field), $offset, $items_per_page);

    // Loop through the items and display them
    if ($items) {
        foreach ($items as $item) {
            // Display the repeater field item
            echo $item['field_name'];
        }
    }

    // Pagination links
    echo '<div class="pagination">';
    echo paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => '/page/%#%',
        'current' => $paged,
        'total' => $total_pages,
        'prev_text' => __('&laquo; Previous'),
        'next_text' => __('Next &raquo;'),
    ));
    echo '</div>';
}
?>

To use this code snippet, you need to replace 'repeater_field' with the name/key of your repeater field in ACF. Optionally, you can also specify the number of items to display per page by passing a value to the $items_per_page parameter (default is 5).

You can then call the wpsnippets_acf_repeater_pagination() function in your template file to display the repeater field items with pagination. The function will automatically handle the pagination logic and display the appropriate items based on the current page.

Note: Make sure to have the ACF plugin installed and activated before using this code snippet.

Examples

Example 1: Basic ACF Pagination for Repeater Field

This example demonstrates how to implement basic pagination for a repeater field created using Advanced Custom Fields (ACF) plugin in WordPress.

<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$posts_per_page = 5;
$repeater_field = get_field( 'repeater_field_name' );

$total_pages = ceil( count( $repeater_field ) / $posts_per_page );
$offset = ( $paged - 1 ) * $posts_per_page;
$paginated_data = array_slice( $repeater_field, $offset, $posts_per_page );

foreach ( $paginated_data as $item ) {
    // Display the repeater field data
}

In this code example, we first retrieve the current page number using get_query_var('paged'). If the page number is not set, we default it to 1. Then, we define the number of posts to display per page using the $posts_per_page variable.

Next, we retrieve the repeater field data using get_field('repeater_field_name'). We calculate the total number of pages based on the count of repeater field items and the posts per page. We also calculate the offset to determine which items to display on the current page.

Finally, we use array_slice() to extract the relevant items for the current page and loop through them to display the repeater field data.

Example 2: Custom ACF Pagination for Repeater Field

This example demonstrates how to create a custom pagination navigation for a repeater field using ACF in WordPress.

<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$posts_per_page = 5;
$repeater_field = get_field( 'repeater_field_name' );

$total_pages = ceil( count( $repeater_field ) / $posts_per_page );
$offset = ( $paged - 1 ) * $posts_per_page;
$paginated_data = array_slice( $repeater_field, $offset, $posts_per_page );

foreach ( $paginated_data as $item ) {
    // Display the repeater field data
}

// Custom pagination navigation
echo '<div class="pagination">';
for ( $i = 1; $i <= $total_pages; $i++ ) {
    echo '<a href="' . get_permalink() . 'page/' . $i . '">' . $i . '</a>';
}
echo '</div>';

In addition to the basic pagination code, this example includes a custom pagination navigation. We loop through the total number of pages and generate links for each page using the get_permalink() function. Each link is wrapped in an anchor tag and displayed within a <div> element with the class “pagination”.

Example 3: ACF Pagination with Previous and Next Links

This example demonstrates how to add previous and next links to the ACF pagination for a repeater field in WordPress.

<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$posts_per_page = 5;
$repeater_field = get_field( 'repeater_field_name' );

$total_pages = ceil( count( $repeater_field ) / $posts_per_page );
$offset = ( $paged - 1 ) * $posts_per_page;
$paginated_data = array_slice( $repeater_field, $offset, $posts_per_page );

foreach ( $paginated_data as $item ) {
    // Display the repeater field data
}

// Previous and Next links
if ( $paged > 1 ) {
    echo '<a href="' . get_permalink() . 'page/' . ( $paged - 1 ) . '">Previous</a>';
}

if ( $paged < $total_pages ) {
    echo '<a href="' . get_permalink() . 'page/' . ( $paged + 1 ) . '">Next</a>';
}

In this example, we enhance the pagination by adding previous and next links. If the current page is greater than 1, we display a “Previous” link that points to the previous page. Similarly, if the current page is less than the total number of pages, we display a “Next” link that points to the next page. The links are generated using the get_permalink() function and the appropriate page number.