Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Masahiro Yasuda
Masahiro Yasuda
25,702 Points
Posted by Masahiro Yasuda
Masahiro Yasuda
25,702 Points

Advanced Custom Fields Flexible Content Loop Issues

Hi I am trying to make nested loop with flexible content by ACF? But an infinite loop happens when I create more than "main-container" field from editor page. How can I fix it?

this is actual code I wrote.

<?php get_header(); ?>

<!-- grid --> <section class="grid"> <section class="sections"> <span class="one"></span> <span class="two"></span> <span class="three"></span> <span class="four"></span> </section> </section>

<!-- kv --> <section id="kv" class="page"> <div class="inner"> <div class="page-title"> <h2><?php the_field('title'); ?></h2> </div> </div> </section>

<section class="row page-container">

<?php get_sidebar(); ?>

<!-- Main Container --> <section class="main-container">

<?php if ( have_rows('modules') ) : ?>
  <?php while ( have_rows('modules') ) : the_row(); ?>

    <?php if( get_row_layout() == 'headline-box' ): ?>
    <section class="container">
      <article class="content-wrap">
        <div class="headline-box">
          <h3 class="headline"><?php the_sub_field('headline-box-header3'); ?></h3>
        </div>
        <div class="lead-text">
          <p><?php the_sub_field('headline-box-lead-text'); ?></p>
        </div>
      </article>
    </section>
    <?php //endif; ?>

    <?php elseif( get_row_layout() == 'subheading-box' ): ?>
    <section class="container">
      <div class="subheading-box">
        <div class="inner">
          <h4 class="subheading"><?php the_sub_field('subheading-box-header4'); ?></h4>
        </div>
      </div>
    </section>
    <?php //endif; ?>

    <?php elseif( get_row_layout() == 'subtitle-box' ): ?>
    <section class="container">
      <div class="subtitle-box">
        <div class="inner">
          <h5 class="subtitle"><span class="line"><?php the_sub_field('subtitle-box-header5'); ?></span></h5>
        </div>
      </div>
    </section>
    <?php //endif; ?>

    <?php elseif( get_row_layout() == 'column-box' ): ?>
    <section class="container">
      <article class="column-box">
        <div class="column">
          <div class="row">
            <div class="overlay-img" style="background-image: url(<?php echo get_template_directory_uri(); ?>/images/common/img-feature01.jpg);"></div>
            <div class="overlay"></div>
            <div class="image" style="background-image: url(<?php echo get_template_directory_uri(); ?>/images/common/img-feature01.jpg);">
              <div class="overlay-dots"></div>
            </div>
            <div class="text">
              <div class="en-title"><?php the_sub_field('column-box-en-title01'); ?></div>
              <p><?php the_sub_field('column-box-text01'); ?></p>
            </div>
          </div>
        </div>
      </article>
      <article class="column-box">
        <div class="column">
          <div class="row _reverse">
            <div class="overlay-img" style="background-image: url(<?php echo get_template_directory_uri(); ?>/images/common/img-feature02.jpg);"></div>
            <div class="overlay"></div>
            <div class="image" style="background-image: url(<?php echo get_template_directory_uri(); ?>/images/common/img-feature02.jpg);">
              <div class="overlay-dots"></div>
            </div>
            <div class="text">
              <div class="en-title"><?php the_sub_field('column-box-en-title02'); ?></div>
              <p><?php the_sub_field('column-box-text02'); ?></p>
            </div>
          </div>
        </div>
      </article>
    </section>
    <?php //endif; ?>

    <!-- List -->
    <?php elseif( get_row_layout() == 'list-box' ): ?>
    <section class="container">
      <div class="content-wrap">
        <div class="list-box">
          <div class="en-title"><?php the_sub_field('list-box-en-title'); ?></div>
          <ul class="<?php the_sub_field('list-box-kind'); ?>">
            <?php if( have_rows('list-box-container') ): ?>
            <?php while( have_rows('list-box-container') ): the_row(); ?>
            <li><?php the_sub_field('list-box-text'); ?></li>
            <?php endwhile; ?>
            <?php endif; ?>
          </ul>
        </div>
      </div>
    </section>-->
    <?php //endif; ?>

    <!-- Link Banner -->
    <?php elseif( get_row_layout() == 'link-banner-box' ): ?>
    <section class="container">
      <div class="content-wrap">
        <div class="link-banner-box">
          <div class="row">
            <?php if( have_rows('link-banner-box') ): ?>
            <?php while( have_rows('link-banner-box') ): the_row(); ?>
            <div class="link-banner <?php the_sub_field('link-banner-kind'); ?>">
              <a href="#">
                <span class="table">
                  <span class="cell"><?php the_sub_field('link-banner-title'); ?></span>
                </span>
              </a>
            </div>
            <?php endwhile; ?>
            <?php endif; ?>
          </div>
        </div>
      </div>
    </section>
    <?php //endif; ?>

    <!-- Table -->
    <?php elseif( get_row_layout() == 'flex-table' ): ?>
    <section class="container">
      <div class="content-wrap">
        <div class="flex-table">
          <div class="thead">
            <div class="th"></div>
            <div class="th">AAA</div>
            <div class="th">CCC</div>
            <div class="th">DDD</div>
          </div>
          <div class="row">
            <div class="tbody">
              <div class="tr label">
                <div class="td">選択肢1</div>
                <div class="td">選択肢2</div>
                <div class="td">選択肢3</div>
                <div class="td">選択肢4</div>
              </div>
            </div>
            <div class="tbody">
              <div class="pc-none">
                <div class="thead">
                  <div class="th">AAA</div>
                </div>
                <div class="tr">
                  <div class="td">選択肢1</div>
                  <div class="td">選択肢2</div>
                  <div class="td">選択肢3</div>
                  <div class="td">選択肢4</div>
                </div>
              </div>
              <div class="tr">
                <div class="td">123</div>
                <div class="td">123</div>
                <div class="td">123</div>
                <div class="td">123</div>
              </div>
            </div>
            <div class="tbody">
              <div class="pc-none">
                <div class="thead">
                  <div class="th">CCC</div>
                </div>
                <div class="tr">
                  <div class="td">選択肢1</div>
                  <div class="td">選択肢2</div>
                  <div class="td">選択肢3</div>
                  <div class="td">選択肢4</div>
                </div>
              </div>
              <div class="tr">
                <div class="td">123</div>
                <div class="td">123</div>
                <div class="td">123</div>
                <div class="td">123</div>
              </div>
            </div>
            <div class="tbody">
              <div class="pc-none">
                <div class="thead">
                  <div class="th">DDD</div>
                </div>
                <div class="tr">
                  <div class="td">選択肢1</div>
                  <div class="td">選択肢2</div>
                  <div class="td">選択肢3</div>
                  <div class="td">選択肢4</div>
                </div>
              </div>
              <div class="tr">
                <div class="td">123</div>
                <div class="td">123</div>
                <div class="td">123</div>
                <div class="td">123</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <?php //endif; ?>

    <!-- Video -->
  <?php elseif( get_row_layout() == 'video' ): ?>
    <section class="container">
      <article class="video-box">
        <section class="grid">
          <section class="sections">
            <span class="one"></span>
            <span class="two"></span>
            <span class="three"></span>
          </section>
        </section>
        <div class="inner">
        <div class="en-title">Movie</div>
        <video id="video" poster="<?php the_sub_field('video-thumbnail'); ?>" muted autoplay loop>
          <source src="<?php the_sub_field('video-file'); ?>" type="video/mp4">
          <p>video要素がサポートされていないブラウザでご覧になっています。</p>
        </video>
        </div>
      </article>
    </section>
    <?php //endif; ?>



      <!-- Gallery 01 -->
      <?php elseif( get_row_layout() == 'image' ): ?>
      <!-- Gallery -->
      <section class="container">
      <article class="gallery-box _01">
        <div class="g-image">
          <div class="overlay"></div>
          <img src="<?php the_sub_field('image-file'); ?>" alt="">
        </div>
        <div class="caption">
          <div class="en-title"><?php the_sub_field('image-en-caption'); ?></div>
          <p><?php the_sub_field('image-caption'); ?></p>
        </div>
      </article>
      </section>
      <?php //endif; ?>

      <!-- Gallery 02 -->
      <?php elseif( get_row_layout() == 'full-image' ): ?>
      <!-- Gallery -->
      <section class="container">
      <article class="gallery-box _02">
        <div class="g-image">
          <div class="overlay"></div>
          <div class="overlay blk"></div>
          <img src="<?php the_sub_field('full-image-file'); ?>" alt="">
        </div>
        <div class="caption">
          <div class="table">
            <div class="cell">
              <p><?php the_sub_field('full-image-caption'); ?></p>
            </div>
          </div>
        </div>
      </article>
      </section>
      <?php //endif; ?>

      <!-- Gallery 03 -->
      <?php elseif( get_row_layout() == '2col-image' ): ?>
      <!-- Gallery -->
      <section class="container">
        <article class="gallery-box _03">
          <?php if ( have_rows('2col-image-container') ) : ?>
          <div class="row">
                <?php while( have_rows('2col-image-container')): the_row();  ?>
            <div class="g-wrap">
              <div class="g-image" style="background-image: url(<?php the_sub_field('2col-image-file'); ?>)">
                <div class="overlay s"></div>
                <div class="overlay wh"></div>
                <div class="caption">
                  <div class="inner">
                    <div class="en-title"><?php the_sub_field('2col-image-en-caption'); ?></div>
                    <p><?php the_sub_field('2col-image-caption'); ?></p>
                  </div>
                </div>
              </div>
            </div>
            <?php endwhile; ?>
          </div>
        </article>
      </section>
      <?php //endif; ?>

      <!-- Gallery 04 -->
      <?php elseif( get_row_layout() == '3col-image' ): ?>
      <!-- Gallery -->
      <section class="container">
        <article class="gallery-box _04">
          <?php if ( have_rows('3col-image-container') ) : ?>
          <div class="row">
            <?php while ( have_rows('3col-image-container') ) : the_row();  ?>
            <div class="g-wrap">
              <div class="g-image" style="background-image: url(<?php the_sub_field('3col-image-file'); ?>)">
                <div class="overlay s"></div>
                <div class="overlay wh"></div>
                <div class="caption">
                  <div class="inner">
                    <div class="en-title"><?php the_sub_field('3col-image-en-caption'); ?></div>
                    <p><?php the_sub_field('3col-image-caption'); ?></p>
                  </div>
                </div>
              </div>
            </div>
            <?php endwhile; ?>
          </div>
          <?php endif; ?>
        </article>
      </section>

    <?php endif; ?>
  <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

</section>

</section><!-- /page-container -->

<?php get_footer(); ?>

1 Answer

Dave StSomeWhere
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Just taking a guess here...

Don't you need to have the beginning if ( have_rows()) before the while ( have_rows()) 

<article id="news">
     <! -- is the while supposed to follow the get_row_layout? -- >
                <?php if( get_row_layout() == 'container' ): ?> 
                <?php while ( have_rows('modules') ) : the_row(); ?>

That seems to be the structure based on the ACF have_rows docs

Masahiro Yasuda
Masahiro Yasuda
25,702 Points
Masahiro Yasuda
Masahiro Yasuda
25,702 Points

Thank you for the message, unfortunately it didn't work..