<?php if( have_rows('about') ): ?>
<?php while( have_rows('about') ): the_row(); ?>
<?php if( have_rows('about_left') ): ?>
<?php while( have_rows('about_left') ): the_row();
$about_image = get_sub_field('about_image');
$about_name = get_sub_field('about_name');
$about_text = get_sub_field('about_text');
?>
<figure class="about-figure">
<?php if ($about_image): ?>
<img class="about-image" src="<?= esc_url($about_image); ?>" alt="<?= esc_attr($about_name); ?>">
<?php endif; ?>
<figcaption class="about-figcaption">
<span class="about-figcaption-title"><?= esc_html($about_name); ?></span>
<span class="about-figcaption-text"><?= esc_html($about_text); ?></span>
</figcaption>
</figure>
<?php endwhile; ?>
<?php endif; ?>
<?php if( have_rows('about_right') ): ?>
<?php while( have_rows('about_right') ): the_row();
$about_title = get_sub_field('about_title');
$about_content_1 = get_sub_field('about_content_1');
$about_content_2 = get_sub_field('about_content_2');
$about_content_3 = get_sub_field('about_content_3');
?>
<div class="about-caption-wrapper">
<div class="about-caption">
<h2 class="heading-2"><?= esc_html($about_title); ?></h2>
<p class="about-caption-text"><?= esc_html($about_content_1); ?></p>
<p class="about-caption-text"><?= esc_html($about_content_2); ?></p>
<p class="about-caption-text"><?= esc_html($about_content_3); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
ACF
ACF Group
<section class="section">
<div class="wrapper">
<?php if( have_rows('hero') ): ?>
<?php while( have_rows('hero') ): the_row();
$image = get_sub_field('image');
$title = get_sub_field('title');
$subtitle = get_sub_field('subtitle');
$text = get_sub_field('text');
?>
<div class="hero">
<figure class="hero-figure">
<img class="hero-figure-img" src="<?= $image ?>" alt="">
</figure>
<div class="hero-caption-wrapper">
<div class="hero-caption">
<h1 class="hero-caption-title">
<span class="hero-caption-title-heading"><?= $title ?></span>
<span class="hero-caption-title-text"><?= $subtitle ?></span>
</h1>
<p class="hero-caption-text"><?= $text ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</section>
ACF Options Page
if( function_exists('acf_add_options_page') ) {
acf_add_options_page(array(
'page_title' => 'Theme General Settings',
'menu_title' => 'Theme Settings',
'menu_slug' => 'theme-general-settings',
'capability' => 'edit_posts',
'redirect' => false
));
acf_add_options_sub_page(array(
'page_title' => 'Theme Header Settings',
'menu_title' => 'Header',
'parent_slug' => 'theme-general-settings',
));
acf_add_options_sub_page(array(
'page_title' => 'Theme Footer Settings',
'menu_title' => 'Footer',
'parent_slug' => 'theme-general-settings',
));
}
How to use wp_kses in ACF?
functions.php
// =============================================================
// ALLOWED HTML IN ACF
// =============================================================
function wpflames_allowed_html() {
return array(
'a' => array(
'href' => array(),
'title' => array(),
'class' => array(),
),
'br' => array(),
'em' => array(),
'strong' => array(),
);
}
<?php echo wp_kses(get_field('text'), wpflames_allowed_html()); ?>
ACF Query Upcoming and Past Events
events-query.php
upcoming.php
past.php
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
add_image_size('pageBanner', 1500, 300, true);
$pageBannerImage = get_field('page_banner_image');
echo $pageBannerImage['sizes']['pageBanner'];
<?php echo wp_get_attachment_image_src( get_field('field_name'), 'medium' )[0]; ?>
<?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
Step 1
Install and activate Advanced Custom Fields
Step 2
Go to Custom Fields
Add a header_background field group in your site.
Step 3
// Adds custom image size for site header background image.
add_image_size( 'header-image', 1600, 350, true );
add_action( 'wp_enqueue_scripts', 'custom_header_background' );
/**
* Sets `header_background` as URL of .site-header.
*/
function custom_header_background() {
// if we are not on a static Page, abort.
if ( ! is_singular( 'page' ) ) {
return;
}
// get the custom field's ID.
$image = get_field( 'header_background' );
// URL of image custom field in a specific size.
$url = wp_get_attachment_image_url( $image, 'header-image' );
if ( ! empty( $image ) ) {
$css = '
.site-header {
background-image: url( ' . $url . ' ) !important;
}';
wp_add_inline_style( 'anchored', $css );
}
}
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 ?>