From the "Install Packages" screen in Atom search for advanced-custom-fields-snippets and click "Install". Then restart Atom.
Alternatively, you can manually install this package by cloning this repo into your Atom packages folder and restarting Atom.
For example (if you're on macOS):
git clone https://github.com/smilledge/acf-atom-snippets.git /Users/$(whoami)/.atom/packages/advanced-custom-fields-snippets
field / field-sub / field-option / field-a / field-h1 / field-p
Get a field, sub-field or options field by it's name.
<?php if (get_field('field_name')) : ?>
<?php the_field('field_name'); ?>
<?php endif; ?>
field-if / field-elseif
If statements using the value of an ACF field.
<?php if (get_field('field_name')) : ?>
<?php else : ?>
<?php endif; ?>
Get the value of a date field and format the date string.
<?php if (get_field('field_name')) :
$date = DateTime::createFromFormat('Ymd', get_field('field_name')); ?>
<?php echo $date->format('d-m-Y'); ?>
<?php endif; ?>
field-image
Display image field with a return value set to URL.
<?php if (get_field('field_name')) : ?>
<img src="<?php the_field('field_name'); ?>" alt="<?php the_field(''); ?>">
<?php endif; ?>
field-image-id
Display image field with a return value set to ID.
<?php
if (get_field('field_name')) {
$attachment_id = get_field('field_name');
wp_get_attachment_image($attachment_id, 'full');
}
?>
field-image-object
Display image field with a return value set to object.
<?php if (get_field('field_name')) :
$image = get_field('field_name'); ?>
<!-- Full size image -->
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"/>
<!-- Thumbnail image -->
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>"/>
<?php endif; ?>
field-file
Display file field with a return value set to URL.
<?php if (get_field('field_name')) : ?>
<a href="<?php the_field('field_name'); ?>" >Download File</a>
<?php endif; ?>
field-file-id
Display file field with a return value set to ID.
<?php if (get_field('field_name')) :
$attachment_id = get_field('field_name');
$url = wp_get_attachment_url($attachment_id);
$title = get_the_title($attachment_id); ?>
<a href="<?php echo $url; ?>" ><?php echo $title; ?></a>
<?php endif; ?>
field-file-object
Display file field with a return value set to object.
<?php if (get_field('field_name')) :
$file = get_field('field_name'); ?>
<a href="<?php echo $file['url']; ?>"><?php echo $file['title']; ?></a>
<?php endif; ?>
field-relationship
Get a relationship field and loop over all returned posts.
<?php $posts = get_field('field_name'); ?>
<?php if ($posts): ?>
<ul>
<?php foreach ($posts as $post) :
setup_postdata($post); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endforeach; wp_reset_postdata(); ?>
</ul>
<?php endif; ?>
field-post
Get a post relationship field.
<?php $post = get_field('field_name');
if ($post) : setup_postdata($post); ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php wp_reset_postdata(); endif; ?>
field-location
Get the street address from a location field.
<?php if (get_field('field_name')) :
$location = get_field('field_name'); ?>
<?php echo $location['address']; ?>
<?php endif; ?>
field-location-staticmap
Get a location field and convert it to a static Google Map.
<?php if (get_field('field_name')) :
$location = get_field('field_name');
$coordinates = isset($location['coordinates']) ? $location['coordinates'] : $location; ?>
<img src="http://maps.google.com/maps/api/staticmap?markers=<?php echo $coordinates; ?>&size=500x300&sensor=false" alt="">
<?php endif; ?>
field-location-map
Get a location field and convert it to an interactive Google Map. Also adds a marker to the location. The CSS is used to prevent rendering issues with map controls caused by most responsive CSS grids.
<?php if (get_field('field_name')) :
$location = get_field('field_name');
$coordinates = isset($location['coordinates']) ? $location['coordinates'] : $location; ?>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 16,
center: new google.maps.LatLng(<?php echo $coordinates; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $coordinates; ?>),
map: map
});
});
</script>
<style>
#map-canvas img {
max-width: inherit;
}
</style>
<div id="map-canvas" style="width:500px;height:300px;"></div>
<?php endif; ?>
field-repeater
Get and loop over a repeater field.
<?php if (have_rows('field_name')) : ?>
<?php while(have_rows('field_name')) : the_row(); ?>
<?php the_sub_field('sub_field_name'); ?>
<?php endwhile; ?>
<?php endif; ?>
field-repeater-grid
Loop over a repeater filed and seperate results into rows. The second tabstop is the row length.
<?php if (get_field('field_name')) : ?>
<div class="items">
<?php foreach (array_chunk(get_field('field_name'), 2) as $row): ?>
<div class="row">
<?php foreach ($row as $item): ?>
<div class="item">
<?php echo $item['field_name']; ?>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
field-form
Display a gravity form. The parameters for gravity_form() are outlined in the Gravity Forms documentation.
<?php if (get_field('field_name')) {
$form = get_field('field_name');
gravity_form_enqueue_scripts($form->id, true);
gravity_form($form->id, display_title, display_description, false, field_values, enable_ajax, 1);
} ?>
field-query
Query a post type on a field value and loop over posts.
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 10,
'meta_key' => 'field_name',
'meta_value' => 'field_value'
);
$query = new WP_Query($args);
?>
<?php if($query->have_posts()) : ?>
<ul>
<?php while ($query->have_posts()) :
$query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_query(); ?>
acf-options
Register an ACF options page / sub page.
if (function_exists('acf_add_options_page')) {
$parent = acf_add_options_page(array(
'page_title' => 'Theme Settings',
'menu_title' => 'Theme Settings',
'menu_slug' => 'theme-settings',
'capability' => 'edit_posts',
'redirect' => false
));
acf_add_options_sub_page(array(
'page_title' => 'Social Settings',
'menu_title' => 'Social Settings',
'parent_slug' => $parent['menu_slug'],
));
}
field-dump
var_dump the field contents wrapped in <pre> tags. Useful for deubbing.
<pre>
<?php
var_dump(get_field('field_name'));
die();
?>
</pre>