Pagination with Gallery field – Advanced Custom Fields

If you work a lot with WordPress, I’m sure you are familiar with the plugin Advanced Custom Fields (ACF). If not, you better go check it out, as this is absolutely one of the best plugins out there. With the PRO version you can use repeater, gallery and flexible content field. Woohoo!

Repeater field and gallery field, are really awesome. There is one thing tho – there is no pagination for that. But don’t worry, as there is a solution for that!

Pagination for gallery field

The pagination for gallery and repeater are a bit different, so I will start with the solution for gallery field. First thing you need to know – even tho pagination will not be generated by some magic function in WP – if you add “number” to the end of the url, you can get current pagination number with “get_query_var(‘paged’)“. Simple as that. And for pagination you can use WP function paginate_links.

Here is full code:

//Setup pagination variables
$gallery = get_field('gallery'); // Get our gallery
$images = array(); // Set images array for current page

$items_per_page  = 12; // How many items we should display on each page
$total_items = count($gallery); // How many items we have in total
$total_pages = ceil($total_items / $items_per_page); // How many pages we have in total
//Get current page
if ( get_query_var( 'paged' ) ) {
	$current_page = get_query_var( 'paged' );
}elseif ( get_query_var( 'page' ) ) {
	//this is just in case some odd rewrite, but paged should work instead of page here
	$current_page = get_query_var( 'page' );
}else{
	$current_page = 1;
}
$starting_point = (($current_page-1)*$items_per_page); // Get starting point for current page

// Get elements for current page
if($gallery){
	$images = array_slice($gallery,$starting_point,$items_per_page);
}

if(!empty($images)){
	//your gallery loop here
}

// And our pagination
$big = 999999999; // need an unlikely integer
echo paginate_links(array(
	'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
	'format' => '?paged=%#%',
	'current' => $current_page,
	'total' => $total_pages,
	'before_page_number' => '<span class="screen-reader-text">'.__('Page ','textdomain').' </span>'
));

In case you want just “load more” button, instead of “paginate_links” you could do something like that:

if($total_pages>1 && $current_page<$total_pages){
	echo '<a href="'.get_permalink().'page/'.($current_page+1).'/">'.__('Load more','textdomain').'</a>';
}

For the next/prev buttons only:

// Set previous page
if($total_pages>1 && $current_page<=$total_pages && $current_page!=1){
	echo '<a href="'.get_permalink().(($current_page-1)!=1 ? 'page/'.($current_page-1).'/' : '').'">'.__('Previous','textdomain').'</a>';
}
// Set next page
if($total_pages>1 && $current_page<$total_pages && $current_page!=$total_pages){
	echo '<a href="'.get_permalink().'page/'.($current_page+1).'/">'.__('Next','textdomain').'</a>';
}

Bonus code – Pagination with internal filter/categories

Update 24.04.2016

If you want to divide gallery into categories or something, and you want to have custom subpages for each category, you will have to add some rewrite rules. Everything started after comment from Manhattan and some emails we exchange to resolve this. Long story short I present you a gist where you can find details about this solution.