<?php
$location = get_field('location');
if( $location ) {
// Loop over segments and construct HTML.
$address = '';
foreach( array('street_number', 'street_name', 'city', 'state', 'post_code', 'country') as $i => $k ) {
if( isset( $location[ $k ] ) ) {
$address .= sprintf( '<span class="segment-%s">%s</span>, ', $k, $location[ $k ] );
}
}
// Trim trailing comma.
$address = trim( $address, ', ' );
// Display HTML.
echo '<p>' . $address . '.</p>';
}
ACF
Query ACF Repeater Field with embedded Group
<!--REPEATER-->
<?php if( have_rows('repeater') ): ?>
<?php while( have_rows('repeater') ): the_row(); ?>
<!--GROUP-->
<?php if( have_rows('group') ): ?>
<?php while( have_rows('group') ): the_row();
// vars
$title = get_sub_field('title'); ?>
<?php echo $title; ?>
<?php endwhile; ?>
<?php endif ?>
<?php endwhile; ?>
<?php endif ?>
Display the selected checkbox in ACF
<?php
$colors = get_field('colors');
if( $colors ): ?>
<ul>
<?php foreach( $colors as $color ): ?>
<li><?php echo $color; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
How to get Advanced Custom Field slug
<?php $anchor = strtolower(str_replace(array(' ', ':'), array('-', ''), get_sub_field('title'))); ?>
<a href="#<?php echo $anchor; ?>"><?php the_sub_field('title'); ?></a>
<h2 id="<?php echo $anchor; ?>" class="headline"><?php the_sub_field('title'); ?></h2>
Add Image Size to Advanced Custom Fields
Define the custom size in functions.php
// ========================================================================= // ADD CUSTOM IMAGE SIZE // ========================================================================= add_image_size( 'gallery-thumb', 600, 400, array( 'left', 'top' ) ); // Hard crop left top
Single line solution
<?php echo wp_get_attachment_image_src( get_field('field_name'), 'medium' )[0]; ?>
With bootstrap card and variables
<?php
$attachment_id = get_field('image');
$size = 'gallery-thumb';
$image = wp_get_attachment_image_src( $attachment_id, $size )[0];
?>
<div class="col-md-3">
<div class="card">
<div class="card-img-top">
<a href="<?php the_field('link'); ?>">
<img src="<?php echo $image; ?>" alt="<?php the_field('title'); ?>">
</a>
</div>
<div class="card-body">
<h4 class="card-title"><?php the_field('title'); ?></h4>
</div>
</div>
</div>
ACF Post Object with Multiple Options
<?php
/*
* Loop through post objects (assuming this is a multi-select field) ( don't setup postdata )
* Using this method, the $post object is never changed so all functions need a seccond parameter of the post ID in question.
*/
$post_objects = get_field('YOUR_CUSTOM_FIELD');
if( $post_objects ): ?>
<ul>
<?php foreach( $post_objects as $post_object): ?>
<li>
<a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a>
</li>
<?php endforeach; ?>
</ul>
<?php endif;
?>
ACF Post Object for Related Posts with Repeater Field
<?php if( have_rows('ITEMS') ): ?>
<?php while ( have_rows('ITEMS') ) : the_row(); ?>
<?php $post_object = get_sub_field('ITEM'); ?>
<?php if( $post_object ): ?>
<?php $post = $post_object; setup_postdata( $post ); ?>
<h4><?php echo get_the_title($post_object->ID); ?></h4>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
How to add Page Title Background with ACF
ACF – Echo something when the field is empty
<?php function cover_subtitle() {
if( get_field('slug') ){ the_field('slug'); }
else{ echo 'Hello!'; }
}
?>
How to add ACF Google Map to frontend
Add single map marker
Add this to functions.php and replace the XXXXX to your Google Maps API key
function add_google_maps_scripts() {
wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXX', array(), '3', true );
wp_enqueue_script( 'google-map-init', get_stylesheet_directory_uri() . '/js/acf-google-map.js', array('google-map', 'jquery'), '0.1', true );
}
add_action( 'wp_enqueue_scripts', 'add_google_maps_scripts' );
//GOOGLE MAPS API KEY - Show the map in the admin
function my_acf_init() {
acf_update_setting('google_api_key', 'XXXXXXXXX');
}
add_action('acf/init', 'my_acf_init');
Add this where you want to display the map
<div class="map">
<?php $terkep = get_field('terkep');
if( !empty($terkep) ): ?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $terkep['lat']; ?>" data-lng="<?php echo $terkep['lng']; ?>"></div>
</div>
<?php endif; ?>
</div>
Add this to style.css
.acf-map {
width: 100%;
height: 400px;
border: #ccc solid 1px;
margin: 20px 0;
}
/* fixes potential theme css conflict */
.acf-map img {
max-width: inherit !important;
}
Download the acf-google-maps.js here
Add multiple map marker
<?php
$args = array(
'post_type' => 'xxxxxxx',
'posts_per_page' => -1,
);
$the_query = new WP_Query($args);
echo "
<div class='map-container'>
<div class='wrap'>
<div class='acf-map'>";
while ( $the_query->have_posts() ) : $the_query->the_post();
$location = get_field('xxxxxxx');
$title = get_the_title();
if( !empty($location) ) {
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h4><a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?></a></h4>
<p class="address"><?php echo $location['address']; ?></p>
</div>
<?php
}
endwhile; echo '
</div>
</div>
</div>';
wp_reset_postdata();
How to query ACF Repeater Field
<?php if( have_rows('repeater_field_name') ): ?>
<ul>
<?php while( have_rows('repeater_field_name') ): the_row();
// vars
$content = get_sub_field('content'); ?>
<li>
<?php echo $content; ?>
</li>
<?php endwhile; ?>
</ul>
<?php endif ?>
How to add True / False checkbox with ACF
<?php if( get_field('field') ){
echo '';
}
else{
echo '';
}
?>
ACF hide if empty custom field
<!--ACF HIDE IF EPMTY CUSTOM FIELD -->
<?php if( get_field('mobil') ): ?>
<li><?php the_field('mobil'); ?></li>
<?php endif; ?>
<!--IF ELSE HIDE - SHOW DIV IF THE_FILED IS EMPTY!!!!!!!-->
<?php if( get_field('hogyan_keszult_link') ){ ?>
<style type="text/css">.hogy-keszul-cta{
display:block;
}</style>
<?php
}?>
//CUSTOM FIELDS SELECET OPTIONS
<?php if( get_field('color') == 'red' ): ?>
<p>Selected the Red choice!</p>
<?php endif; ?>