Repeater fields in a field group using ACF with WordPress

This challenge was brought to me by the Advanced Custom Fields plugin. I love this plugin and use it a lot. It’s especially good for instances where a page or post needs specific info, so entry fields can be set up to get the info the way it’s needed.

The need: a page template that shows a number of different items, with an option to select related items for each. Repeater fields for each item are the way to go because each item has the same content needs and items can be added as needed, with no limit to the number of items.

Field Group Name: Topics

template sections:

Template code

Grab the title:

<?php while ( have_posts() ) : the_post(); ?>
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

If the overview field has content, show it. And/or if the statement field has content, show that. If the field is empty, nothing shows.

<?php
 if(get_field('overview'))
 {
 echo '<p>' . get_field('overview') . '</p>';
 }
 ?>
 <?php
 if(get_field('statement'))
 {
 echo '<h2>' . get_field('statement') . '</h2>';
 }
 ?>

Now for the repeater area. The div “page-content” holds all the topics. We also set up to get the repeater sections.

<div class="page-content">
 <?php if( have_rows('topic_fields') ):
 while( have_rows('topic_fields') ): the_row();
 // vars
 $heading = get_sub_field('heading');
 $content = get_sub_field('topic_text');
 $rel_tags = get_sub_field('topic_related_tags');
 $rel_post = get_sub_field('related_post');
 { ?>

Put each topic in containers for section and article. Then show the heading and content fields.

<section class="content group">
 <article class="eight columns">
 <h2><?php echo $heading; ?></h2>
 <?php echo $content; ?>
 </article>

For each topic, the content writer can choose any or all of three ways to show related content. If any of those fields are filled, show the word “Related”, otherwise skip it.

<aside class="four columns">
 <?php
 $topic_tags = get_sub_field('topic_related_tags');
 $topic_post = get_sub_field('related_post');
 $topic_page = get_sub_field('related_page');
 if (!empty($topic_tags) || !empty($topic_post) || !empty($topic_page )) {
 echo '<h4>Related</h4>';
 } ?>

If a related page is selected, show the word “page”, then get the link and title.

<?php
 $post_object = get_sub_field('related_page');
 if( $post_object ):
 // override $post
 $post = $post_object;
 setup_postdata( $post );
 ?>
 <p class="type">Page</p>
 <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
 <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
 <?php endif; ?>

If a related post is selected, show the word “post”, then get the link and title.

<?php
 $post_object = get_sub_field('related_post');
 if( $post_object ):
 // override $post
 $post = $post_object;
 setup_postdata( $post );
 ?> 
<p class="type">Post</p>
 <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
 <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
 <?php endif; ?>

Now let’s close it all up.

</aside>
</section>
<?php } endwhile; endif; ?> <?php endwhile; // End of the loop. ?>

 

There are likely other, more elegant ways to write this code, but it works and that’s good enough.