Aleš Sýkora / November 28, 2023 / 0 comments
ACF nested repeaters as document library
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
- Secondary repeater (slug: documents) = Document Subcategory name (for example – motorcycles) with classic editor for description.
![](https://www.great-tit.com/wp-content/uploads/2023/11/ximage-3-12-1024x558.png.pagespeed.ic.Sr4mKeC0KG.png)
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.
![](https://www.great-tit.com/wp-content/uploads/2023/11/ximage-3-13-1024x923.png.pagespeed.ic.NJ5IcUn3AO.png)
![](https://www.great-tit.com/wp-content/uploads/2023/11/ximage-4-11-1024x1013.png.pagespeed.ic.L3uVzlI5WH.png)
![](https://www.great-tit.com/wp-content/uploads/2023/11/ximage-5-11-964x1024.png.pagespeed.ic.iRtTaeHYrQ.png)
![](https://www.great-tit.com/wp-content/uploads/2023/11/ximage-6-9.png.pagespeed.ic.zqisIBHfWW.png)
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
![](https://www.great-tit.com/wp-content/uploads/2023/11/ximage-7-10-1024x710.png.pagespeed.ic.-EiEfCewfA.png)
Fuel my passion for writing with a beer🍺
Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻