ACF nested repeaters as document library

3 min read / ACF, Oxygen Builder, Plugins, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: 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 categorySecondary repeater (slug: documents) = Document Subcategory name (for…

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.

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  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

0 comments