Support

Account

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.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.