ACF Group Sub Field Not Displaying

Question

I have created custom fields through the ACF Options page where a user will input their social media profile links. If there is no link, it will not display that icon on the front end. I've done this through creating a group titled 'Social Media' with the various platforms as fields within that group.

I'm pulling my hair out trying to pull those sub-field values into the theme footer. It simply doesn't display anything but when I display a value that isn't nested within a group it shows up.

Footer.php ↴

<?php
   if( have_rows('social_media') ):
   while( have_rows('social_media') ) : the_row();
?>
<li>
   <a href="<?php the_sub_field('instagram'); ?>">
      <img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
   </a>
</li>
<?php endwhile; endif; ?>

ACF Group ↴

ACF Options Page ↴

TIA for any help. Much appreciated.

Answer 1

I assume the fields are on an ACF options page so you have to pass the string options in the have_rows function

have_rows('social_media', 'options')

Check this link for more info https://www.advancedcustomfields.com/resources/options-page/

the code wil look like:

<?php
   if( have_rows('social_media', 'option') ):
   while( have_rows('social_media', 'option') ) : the_row();
?>
<li>
   <a href="<?php the_sub_field('instagram'); ?>">
      <img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
   </a>
</li>
<?php endwhile; endif; ?>

Note that the sub fields don't need a options string

A clean way to hide the Li when the field is empty:

<?php while ( have_rows('social_media', 'option') ) : the_row(); ?>
    <?php if (get_sub_field('instagram')): ?>
        <li>
           <a href="<?php the_sub_field('instagram'); ?>">
              <img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
           </a>
        </li>
    <?php endif; ?>
<?php endwhile; ?>