<?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>
Advanced Custom Fields
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 – 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; ?>