• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Design
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
    • Login
Home ยป ACF

ACF

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>';
}

Filed Under: Free Tagged With: ACF, Google Maps

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

Filed Under: Free Tagged With: ACF, PHP

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

Filed Under: Free Tagged With: ACF

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>

Filed Under: Free Tagged With: ACF

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>   

Filed Under: Free Tagged With: ACF

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;

?>

Filed Under: Free Tagged With: ACF

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

Filed Under: Free Tagged With: ACF

How to add Page Title Background with ACF

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

 
 
Forgot Password

Filed Under: Premium Tagged With: ACF

ACF – Echo something when the field is empty

<?php function cover_subtitle() { 
    if( get_field('slug') ){ the_field('slug'); }
            else{ echo 'Hello!'; }
        }
?> 

Filed Under: Free Tagged With: ACF

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();

Filed Under: Free Tagged With: ACF, Map

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

Filed Under: Free Tagged With: ACF

How to add True / False checkbox with ACF

<?php if( get_field('field') ){
        echo '';
    } 
    else{
        echo '';
    }
?>

Filed Under: Free Tagged With: ACF

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

Filed Under: Free Tagged With: ACF

Primary Sidebar

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress, Genesis Framework and WooCommerce.

  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
WP Rocket - WordPress Caching Plugin
UpdraftPlus Premium

Tags

ACF Ajax Analytics Animation API Bootstrap Breadcrumb Card category CPT CSS Genesis Git Google Maps Grid GSAP Gutenberg htaccess HTML JavaScript jQuery json landing layout Map masonry Menu Parallax PHP SASS skew SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2021 WP Flames - All Right Reserved