<?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; ?>