events-query.php
upcoming.php
past.php
ACF
Query Posts by Custom Fields in WordPress
Query WordPress Posts by Advanced Custom Fields
ACF Post Object
How to use ACF image with alt tag
Add this snippet to functions.php
Now You can reuse this function in your WordPress template files with custom class.
<?php acf_image_with_alt_tag('your_image_class'); ?>
ACF Repeater field with post object
Display Google Maps location address details of ACF field without coordinates
<?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>';
}
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; ?>