smilledge / acf-atom-snippets

Atom Snippets for Wordpress ACF (Advanced Custom Fields)
MIT License
3 stars 1 forks source link

Atom Snippets for Wordpress ACF (Advanced Custom Fields)

Install

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

Snippets

Basic Fields and conditionals

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

Date field

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

Image and file field

field-image

Display image field with a return value set to URL.

<?php if (get_field('field_name')) : ?>
    <img src="https://github.com/smilledge/acf-atom-snippets/raw/master/<?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="https://github.com/smilledge/acf-atom-snippets/raw/master/<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"/>
    <!-- Thumbnail image -->
    <img src="https://github.com/smilledge/acf-atom-snippets/raw/master/<?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="https://github.com/smilledge/acf-atom-snippets/blob/master/<?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="https://github.com/smilledge/acf-atom-snippets/blob/master/<?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="https://github.com/smilledge/acf-atom-snippets/blob/master/<?php echo $file['url']; ?>"><?php echo $file['title']; ?></a>
<?php endif; ?>

Relationship field

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="https://github.com/smilledge/acf-atom-snippets/blob/master/<?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="https://github.com/smilledge/acf-atom-snippets/blob/master/<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php wp_reset_postdata(); endif; ?>

Location field

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

Repeater field

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

Gravity Forms Field

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

Query posts

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="https://github.com/smilledge/acf-atom-snippets/blob/master/<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endwhile; ?>
    </ul>
<?php endif; ?>
<?php wp_reset_query(); ?>

Options page

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'],
    ));
}

Misc

field-dump

var_dump the field contents wrapped in <pre> tags. Useful for deubbing.

<pre>
    <?php
        var_dump(get_field('field_name'));
        die();
    ?>
</pre>