Advanced Custom Fields code snippet

In this code snippet I am going to share some ACF fields display code together

Link Field

<?php 
$link = get_field('link');
if( $link ): 
    $link_url = $link['url'];
    $link_title = $link['title'];
    $link_target = $link['target'] ? $link['target'] : '_self';
    ?>
    <a class="button" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?></a>
<?php endif; ?>

Flexible content Field

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


        <!-- 1st layout start -->
        <?php if( get_row_layout() == 'layout1' ): ?>
          <div class="section">
              <?php the_sub_field('text'); ?>
          </div>
        <?php endif; ?>

        <!-- 2st layout start -->
        <?php if( get_row_layout() == 'layout2' ): ?>
          <div class="section">
              <?php the_sub_field('title'); ?>
          </div>
        <?php endif; ?>

        <!-- more will be on down  -->


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

Gallery

<?php 
$images = get_field('gallery');
if( $images ): ?>
<ul>
    <?php foreach( $images as $image ): ?>
    <li>
        <a href="<?php echo esc_url($image['url']); ?>">
          <!--  
            ==================
            WP Default Image Size:
            ----------
            thumbnail(150x150),
            medium(300x300),
            medium_large(768xauto),
            large(1024x1024),
            full(original size)
            ====================== 
            -->
            <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>"
                alt="<?php echo esc_attr($image['alt']); ?>" />
        </a>
        <p><?php echo esc_html($image['caption']); ?></p>
    </li>
    <?php endforeach; ?>
</ul>
<?php endif; ?>

Add active class to the first element of the ACF repeater field. You can also use the same trick to all your looping field like the gallery, flexible content, etc

<?php if ( have_rows('repeter_name') ) : ?>
<!-- Assain 1 to a vairable -->
<?php $item_count = 1;?>

<ul>
    <?php while( have_rows('repeter_name') ) : the_row(); ?>

    <!-- check if it's first element then echo active class -->
    <li <?php if($item_count===1){echo 'class="active"';}?>> <?php the_sub_field('sub_field_name'); ?></li>

    <!--     
    Change the variable value with +1 from the previous value.
    So after loop it will be 2 > 3 > 4 so on.. 
    -->

    <?php $item_count++;?>
    <?php endwhile; ?>
</ul>

<?php endif; ?>

If you use VS Code as text editor you can check out ACF Snippet for vs code. it will help you a lot while working on ACF and WordPress project