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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
/** * Setup pagination variables */ /** * Get our gallery */ $gallery = get_field( 'gallery' ); /** * Set images array for current page */ $images = array(); /** * How many items we should display on each page */ $items_per_page = 12; /** * How many items we have in total */ $total_items = count( $gallery ); /** * How many pages we have in total */ $total_pages = ceil( $total_items / $items_per_page ); /** * 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; } /** * Get starting point for current page */ $starting_point = ( ( $current_page - 1 ) * $items_per_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:
|
1 2 3 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * 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>'; } |
Source: Codebusters