ACF Snippets for Visual Studio Code

A comprehensive collection of 50+ snippets for Advanced Custom Fields (ACF) development in WordPress.

✨ Features

🎯 50+ snippets for all ACF field types
🔒 Secure by default - all snippets use proper escaping (esc_html(), esc_url(), esc_attr())
📦 Organized structure - snippets grouped by functionality
🧱 Gutenberg support - includes block registration snippets
⚡ Tab stops - smart cursor positions for quick editing

📦 Installation

Open VS Code
Press Ctrl+P / Cmd+P
Type ext install wpbeer.acf-snippet-v2
Press Enter

Or search for "ACF Snippets" in the Extensions sidebar.

🚀 Usage

All snippets follow the naming convention: field:{field_type}:{option}

Type the prefix and press Tab to expand the snippet.

📋 Available Snippets

Basic Fields (`basic.code-snippets`)

Prefix	Description
`field`	Display ACF field
`field:text`	Text field wrapped in `<p>`
`field:header`	Header field with customizable tag (h1-h6)
`field:date`	Date field with formatting
`field:if`	Conditional check
`field:ifelse`	Conditional with else
`field:sub`	Sub field (for repeaters/flex)
`field:option`	Options page field
`field:link`	Link field
`field:link:array`	Link field (array return)
`field:url`	URL field
`field:page_link`	Page Link field
`field:page_link:multiple`	Multiple Page Links
`field:wysiwyg`	WYSIWYG Editor
`field:select`	Select field
`field:checkbox`	Checkbox field
`field:radio`	Radio Button field
`field:color_picker`	Color Picker field
`field:group`	Group field

Image & Media Fields (`image.code-snippets`)

Prefix	Description
`field:image`	Image field (URL return)
`field:image:id`	Image field (ID return)
`field:image:array`	Image field (Array return)
`field:image:array:example`	Full image example with caption
`field:gallery`	Gallery field
`field:gallery:captions`	Gallery with captions
`field:file`	File field (URL return)
`field:file:id`	File field (ID return)
`field:file:object`	File field (Object return)
`field:oembed`	oEmbed field (video/audio)

Repeater Fields (`repeater.code-snippets`)

Prefix	Description
`field:repeater`	Basic repeater loop
`field:repeater:grid`	Repeater with grid layout
`field:repeater:slider`	Repeater for slider
`field:repeater:foreach`	Repeater with foreach
`field:repeater:nested`	Nested repeater
`field:repeater:first`	Get first row only

Flexible Content (`flexible.code-snippets`)

Prefix	Description
`field:flex`	Basic flexible content
`field:flex:nested`	Nested flexible content
`field:flex:switch`	Multiple layouts with elseif

Relational & Advanced (`misc.code-snippets`)

Prefix	Description
`field:relationship`	Relationship field
`field:post_object`	Post Object field
`field:user`	User field
`field:taxonomy`	Taxonomy field
`field:map`	Google Map field
`field:query`	WP_Query with meta
`field:form`	Gravity Forms integration
`field:cf7`	Contact Form 7 integration
`ddfield`	Debug - var_dump field

ACF Registration (`misc.code-snippets`)

Prefix	Description
`acf:register_block`	Register Gutenberg block
`acf:options_page`	Register options page
`acf:local_field_group`	Register local field group

📖 Examples

Basic Field

<?php if ( get_field('field_name') ) : ?>
    <?php the_field('field_name'); ?>
<?php endif; ?>

Image Field (Array)

<?php
$image = get_field('hero_image');
if( !empty( $image ) ): ?>
    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>

Repeater Field

<?php if ( have_rows('team_members') ) : ?>
    <?php while( have_rows('team_members') ) : the_row(); ?>
        <?php the_sub_field('name'); ?>
    <?php endwhile; ?>
<?php endif; ?>

Flexible Content

<?php if ( have_rows( 'page_sections' ) ) : ?>
    <?php while ( have_rows('page_sections' ) ) : the_row(); ?>
        <?php if ( get_row_layout() == 'hero_section' ) : ?>
            <div class="hero">
                <?php the_sub_field( 'title' ); ?>
            </div>
        <?php endif; ?>
    <?php endwhile; ?>
<?php endif; ?>

Register ACF Block

<?php
add_action( 'acf/init', function() {
    if( function_exists('acf_register_block_type') ) {
        acf_register_block_type(array(
            'name'              => 'hero',
            'title'             => __('Hero Section'),
            'description'       => __('A custom hero block.'),
            'render_template'   => 'template-parts/blocks/hero.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array( 'hero', 'banner' ),
        ));
    }
});
?>

📁 File Structure

snippets/
├── basic.code-snippets      # Basic field types
├── image.code-snippets      # Images, galleries, files
├── repeater.code-snippets   # Repeater variations
├── flexible.code-snippets   # Flexible content
└── misc.code-snippets       # Forms, queries, blocks, etc.

🔧 Requirements

VS Code 1.85.0 or higher
ACF 6.0+ (some snippets require ACF PRO)
WordPress 6.0+

ACF PRO Required For:

Repeater fields
Flexible Content
Gallery field
Options pages
ACF Blocks

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/new-snippet)
Commit your changes (git commit -m 'Add new snippet')
Push to the branch (git push origin feature/new-snippet)
Open a Pull Request

📝 Changelog

See CHANGELOG.md for a list of changes.

👥 Contributors


Anthony Hubble	Michael Mano	Neil (Ne Ne)	Vadym Mishchenko

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

⭐ Support

If you find this extension helpful, please consider:

⭐ Starring the GitHub repository
📝 Leaving a review on the VS Code Marketplace
🐛 Reporting issues on GitHub

ACF Snippets

WP Beer