Advanced Custom Fields code snippet

Advance custom field Link Field, Flexible content Field, Gallery and tricks code snippet

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

Link Field

ACF Link
<?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

ACF Flexible 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

ACF 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

Active Class on first item
<?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

Previous Code

Protected: WP user Login Notification

There is no excerpt because this is a protected po ...

Next Code

Upload file in hosting server via CPanel corn job

File transfer with Cpanel Cron job. Transfer file ...

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

7 + three =

Easy ACF repeater Bootstrap accordion in WordPress

FAQ collapse design with ACF repeater Bootstrap ac ...

ACF

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

skype

Need Coding Help?

Connect Skype
top