December 30, 2024
ACF
1 min read
Essential Code Snippet For Web Developers

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

Leave a Reply

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

3 Comments

Enabling Guest Checkout in WooCommerce: Bypassing Email Verification for Order Payment

Enable guest payment, bypass email verification. Enhance user experience, boost conversions. Easy, efficient, and customer-friendly solution

Preventing Duplicate Email Submissions in Elementor Pro Forms

Prevent users from submitting the same email multiple times in an Elementor Pro form with this simple code.

Add Classe when the item visible

Add class on scroll to viewport jquery code

WordPress Next and Previous Post

WordPress Next and Previous Post navigation for custom post type and defult blog post simple php code to use single page

Web Development Project in mind?

if you looking for a web developer for paid contribution to your project I am available for work.

Mukto
Mukto

Click the button below to chat with me.