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
2 Comments
Very nice write-up. I certainly love this website.
Keep writing!
Thank you.