• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

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

ACF

ACF Query Upcoming and Past Events

events-query.php
upcoming.php
past.php

Filed Under: Free Tagged With: ACF

Query Posts by Custom Fields in WordPress

Query WordPress Posts by Advanced Custom Fields

Filed Under: Free Tagged With: ACF

ACF Post Object

Filed Under: Free Tagged With: ACF

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

Filed Under: Free Tagged With: ACF

ACF Repeater field with post object

Filed Under: Free Tagged With: 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

Gabor Flamich

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

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
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack 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
© 2023 WP Flames - All Right Reserved