Tuesday, November 15, 2022
The Great Tit
Updated: 15. 11. 2022, Added: 15. 11. 2022

ACF nested repeaters as document library

If you want to prepare a Documents page for your website, you may consider creating it with ACF Pro repeaters.

I Use these three ACF repeaters:

  • Main repeater (slug: docs-group) = Document category name (for example - manuals) with classic editor to add some description to category
    • Secondary repeater (slug: documents) = Document Subcategory name (for example - motorcycles) with classic editor for description.
      • Tertiary repeater (slug: doc-files) = Files

How to build the ACF Field group

You will need a Repeater inside repeater inside repeater. In parent repeaters also add the Wysiwig editors for descriptions. In the last child repeater add the File array field.

Main repeater containing Name of documents group and secondary repeater
Secondary repeater containing description of subcategory and teriary repeater
Tertiary repeater containing documents itselves
File field is set up as type = Array

Display the ACF repeater document library on frontend

You can use the code below in your theme or in Oxygen Builder code block. Style it with classes:

.docs-group {}
.docs-wrap {}
.docs-files {}
.docs-file {}
<?php
// check for rows (parent repeater)
if (have_rows('docs_group')) : ?>
    <div class="docs-group">
        <?php
        // loop through rows (parent repeater)
        while (have_rows('docs_group')) : the_row(); ?>
            <?php the_sub_field('docs_name_desc'); ?>
            <?php

            // check for rows (sub repeater 1)
            if (have_rows('documents')) : ?>
                <div class="docs-wrap">
                    <?php

                    // loop through rows (sub repeater 1)
                    while (have_rows('documents')) : the_row(); ?>

                        <?php the_sub_field('name_desc_doc'); ?>
                        <?php

                        // check for rows (sub repeater 2)
                        if (have_rows('doc_files')) : ?>
                            <div class="docs-files">
                                <?php

                                // loop through rows (sub repeater 2)
                                while (have_rows('doc_files')) : the_row(); ?>


                                    <?php
                                    $file = get_sub_field('file');
                                    if ($file) : ?>
                                        <div class="docs-file">
                                            <a href="<?php echo $file['url']; ?>">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
                                                    <path fill="var(--primary)" d="m24.707 8.793-6.5-6.5C18.019 2.105 17.765 2 17.5 2H7c-1.105 0-2 .895-2 2v22c0 1.105.895 2 2 2h16c1.105 0 2-.895 2-2V9.5c0-.265-.105-.519-.293-.707zM18 21h-8c-.552 0-1-.448-1-1s.448-1 1-1h8c.552 0 1 .448 1 1s-.448 1-1 1zm2-4H10c-.552 0-1-.448-1-1s.448-1 1-1h10c.552 0 1 .448 1 1s-.448 1-1 1zm-2-7c-.552 0-1-.448-1-1V3.904L23.096 10H18z" />
                                                </svg>
                                                <?php echo $file['filename']; ?>
                                            </a>
                                        </div>


                                    <?php endif; ?>

                                <?php endwhile; ?>
                            </div>
                        <?php endif; //if( get_sub_field('items 2') ): 
                        ?>

                    <?php endwhile; ?>
                </div>

            <?php endif; //if( get_sub_field('items 1') ): 
            ?>
        <?php endwhile; // while( has_sub_field('parent repeater') ): 
        ?>
    </div>

<?php endif; // if( get_field('parent repeater') ): 
?>

Frontend view of your Document files

Did I help you? Support me on Patreon!
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram