Support

Home Forums Add-ons Repeater Field Advanced Custom Repeater Field Page Navigation

Solved

Advanced Custom Repeater Field Page Navigation

  • Hi Elliot,

    I am using Advanced Custom Repeater Field. I want page navigation in Repeater Field give me sample or idea..

    Thank you
    chandru

    • Elliot

    • November 22, 2013 at 4:35 pm

    Hi @chandru998

    Are you wanting page navigation in the backend or frontend of your website?

    This kind of functionality does not yet exist in the add-on, but could be written with some simple code.

    Thanks
    E

  • Hi @elliot

    I want frontend page navigation in Repeater Field.Only 1st 5 Field show in 1st page after that all next next page. If you have any idea this page navigation.

    Thanks
    chandru

    • Elliot

    • November 24, 2013 at 2:54 pm

    Hi @chandru998

    Thanks for clarifying.
    You could accomplish this with some simple PHP. Thinking about it, I would like to create a video tutorial on this topic as it would be a very good demonstration of how to use basic PHP with a repeater field.

    Until I create the video, you can write this yourself by using a $_GET parameter in the url to set the ‘page’ number.

    eg: ?page=2

    In your code, use a variable to hold how many rows per page like so:

    $rows_per_page = 5;

    Then in your repeater field loop, you can add in a conditional statement like so:

    
    <?php 
    
    // vars
    $rows_per_page = 5;
    $page = 1;
    $i = 0;
    
    // read $page from url param
    if( !empty($_GET['page']) )
    {
    	$page = $_GET['page'];
    }
    
    // vars
    $min = $page * $rows_per_page;
    $max = $min + $rows_per_page;
    
    if( have_rows('repeater') ):
     
        while( have_rows('repeater') ): the_row(); $i++;
    	
    		// ignore this row, if $i is lower than $min
    		if( $i < $min )
    		{
    			continue;
    		}
    		
    		
    		// stop loop completely, if $i is higher than $max
    		if( $i > $max )
    		{
    			break;
    		}
    		
    		
            // Your loop code
            the_sub_field('sub_field');
            
     
        endwhile;
     
    else :
     
        // no rows found
     
    endif;
    
    ?>
    

    Hope that helps.

    Thanks
    E

    • chieto

    • January 19, 2014 at 7:08 pm

    Hi @elliot,

    Thanks for sharing this codes, but in the next page (url?page=2) is not working and showing my 404 page please help me.

    Thanks,

    Chieto

    • Elliot

    • January 20, 2014 at 9:50 am

    Hi @chieto

    Perhaps you need to simplify the code, to make sure that you can pass the ?page=2 parameter.

    It is possible that your theme is looking for that GET param and doing it’s own logic which is creating the 404

    Thanks
    E

    • chieto

    • January 22, 2014 at 9:41 pm

    Hi @elliot,

    Can you please share me a link sample on GET param?
    Still no luck.

    thanks

    • Elliot

    • January 24, 2014 at 8:54 am

    Hi @chieto

    A $_GET param is when you add something like ?foo=bar to your url. You can then read these parameters via PHP code via the $_GET array.

    Hope that helps.

    Thanks
    E

  • Hi Elliot,

    This would add great value to the functionality in some of my projects!

    I’m not a genius when it comes to coding, so I’m really looking forward to your video tutorial!

    Thanks

  • Hi Elliot,

    Would it be possible to use the builtin WordPress $paged function instead?
    $page = (get_query_var('paged')) ? get_query_var('paged') : 1;

    And after the loop call the default pagination functions like this?

    next_posts_link();
    previous_posts_link();

    An working example would be very welcome for this indeed.
    Thanks a lot!

    • Elliot

    • February 4, 2014 at 9:34 am

    Hi @twansparant

    The above code is not a WP_Query, therefore the above code would not work,

    Thanks
    E

  • Hi Elliot,

    Thanks for your reply, I know it isn’t a ‘regular’ wordpress query. I’m just trying to get it working like one.

    I got my following code working with a custom query_var called albums: Pastebin
    And I can use the url: http://mydomain.local/pagename/?albums=2

    The last thing I want to achieve is a rewrite rule for the query var, but somehow that isn’t working yet. I would like an url like this: http://mydomain.local/pagename/page/2/

    /* Photo albums pagination parameter */
    function add_albums_query_var(){
    	global $wp;
    	$wp->add_query_var('albums');
    }
    /* Rewrite rules albums pagination */
    function add_albums_rewrite_rule() {
    	add_rewrite_rule('^/page/([0-9]+)/?$', 'index.php?p=25&albums=$matches[1]', 'top');
    }
    add_filter('init', 'add_albums_query_var');
    add_action('init', 'add_albums_rewrite_rule');

    25 is the page id where the repeater field is looped.
    Any idea why this isn’t working?

    Thanks a lot!

    • Elliot

    • February 5, 2014 at 12:20 pm

    Hi @chandru998

    The above code that I wrote has 0% connection to the WP_Query object. This means you cant modify it via the query code you have above.

    You will need to use the code that I wrote above.

    Thanks
    E

  • I got my pagination working!
    Working example can be found here for those who are interested: ACF repeater field pagination

  • I am using this code on ACF(repeater) however it doesn’t work on homepage and also it doesn’t work with permalink(post name) could you please check that or guide me how i could solve this issue?

  • Hi akdesigner, which code are you referring to?
    And did you flush your permalinks?

  • I am talking about pagination code it.

    http://mattlangett.utv2.hemsidor.nu/

    We have fixed the issue with permalink however it still not working on homepage.

  • Did not test this, but is your homepage set as a static page or does it use the index.php?

    Then try changing the second parameter of the add_rewrite_endpoint rule into EP_ALL:
    add_rewrite_endpoint('productpage', EP_ALL);

  • http://mattlangett.utv2.hemsidor.nu/?productpage=2

    I have turned off pretty permalink and you can check it. It doesn’t work.
    It redirect to blog page.

  • Check out the Rewrite endpoints API

    I think you need to change the $places parameter into EP_ALL and flush the permalinks again. Let me know if this works.

  • Yes the front page is set as static.

    Also I have tested below code with (EP_ROOT, EP_PERMALINK, EP_PAGES, EP_ALL) but it doesn’t work 🙁

    function productpage_rewrite_endpoint(){
    global $wp_rewrite;
    add_rewrite_endpoint(‘productpage’, EP_ALL);
    $wp_rewrite->flush_rules();
    }
    add_filter(‘init’, ‘productpage_rewrite_endpoint’);

  • I’m afraid this could be a bug:
    add_rewrite_endpoint causes front-page.php template to be ignored

    • jnicol

    • March 7, 2014 at 9:26 am

    I just wanted to say thanks to Elliot and Twansparent. Your contributions to this thread helped me implement pagination for a Repeater.

    I’ve written up my solution on my blog:

    http://f6design.com/journal/2014/03/06/paginating-an-advanced-custom-fields-repeater/

    It’s similar to the code Twansparent posted in this thread, but leverages WordPress’ native pagination permalink structure (e.g. /gallery/page/2), so there is no need to do any custom URL rewriting. My pagination is different too, in that it generates pagination links identical to those created by WordPress’ paginate_links function, e.g.

    << Previous 1 … 4 5 6 7 8 … 23 Next >>

    Hope that’s helpful to someone.

  • Although I ended up using a custom post type for this instead of a repeater field, this is a very useful piece of code!
    Thanks jnicol!

    • jnicol

    • March 11, 2014 at 8:39 pm

    @Twansparent It’s certainly hard to decide whether a Repeater or a Custom post Type is the better approach. For an image gallery a Repeater is far more user friendly to edit, but if the Repeater grows too large I suspect performance and usability will suffer.

    P.S. I realised that my custom function to generate pagination links is totally redundant since WP’s native paginate_links can be used instead. Facepalm. I’ve updated my blog post accordingly.

Viewing 25 posts - 1 through 25 (of 27 total)

You must be logged in to reply to this topic.