• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Genesis
    • WooCommerce
    • WordPress
  • Premium
  • Blog
  • About
    • Tools I Use
  • Contact
  • Login
Home » Advanced Custom Fields

Advanced Custom Fields

How to get Advanced Custom Field slug

2019-10-29 by Gabor Leave a Comment

<?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: Advanced Custom Fields, Free Content

Add Image Size to Advanced Custom Fields

2019-10-07 by Gabor Leave a Comment

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: Advanced Custom Fields, Free Content, WordPress

ACF – Echo something when the field is empty

2018-10-11 by Gabor

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

Filed Under: Advanced Custom Fields

How to add ACF Google Map to frontend

2018-09-23 by Gabor

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: Advanced Custom Fields, WordPress

How to query ACF Repeater Field

2018-09-22 by Gabor

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

How to add True / False checkbox with ACF

2018-08-22 by Gabor

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

Filed Under: Advanced Custom Fields

ACF hide if empty custom field

2018-07-14 by Gabor


 <!--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: Advanced Custom Fields, PHP, WordPress

Primary Sidebar

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

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
  • Flames Design
© 2021 WP Flames - All Right Reserved