Essential VS Code Snippets for ACF/PHP Development
As a WordPress developer working with Advanced Custom Fields (ACF) and PHP, having quick access to code snippets can significantly boost your productivity. Here's a collection of VS Code snippets that will help you work faster with ACF fields and common PHP patterns.
How to use these snippets: Copy the JSON code below and add it to your VS Code snippets file (File > Preferences > Configure User Snippets > php.json).
Basic PHP Tags
PHP Open/Close Tag
{ "PHP Open Tag": { "prefix": "<?", "body": [ "<?php $0 ?>" ], "description": "PHP open tag with closing and cursor in the middle" } }
If Condition
{ "if": { "prefix": "if(!empty()){", "body": [ "<?php if(!empty($0)){ ?>" ], "description": "Check if variable is not empty" } }
Complete Snippets File
For your convenience, here's the complete JSON file with all snippets:
{ "PHP Open Tag": { "prefix": "<?", "body": [ "<?php $0 ?>" ], "description": "PHP open tag with closing and cursor in the middle" }, "if": { "prefix": "if(!empty()){", "body": [ "<?php if(!empty($0)){ ?>" ], "description": "Output an ACF sub field" }, "endif": { "prefix": "end", "body": [ "<?php endif; ?>" ], "description": "endif" }, "ACF Sub Field": { "prefix": "echo", "body": [ "<?php echo $0; ?>" ], "description": "Output an ACF sub field" }, "ACF Get Sub Field": { "prefix": "get", "body": [ " get_sub_field('$0');" ], "description": "Get an ACF sub field value" }, "ACF Image": { "prefix": "acfimg", "body": [ "<?php if(!empty($$image)): ?>", "<?php echo wp_get_attachment_image($$image,'full','false',array('class' =>'')); ?>", "<?php endif; ?>" ], "description": "ACF image field with alt text" }, "acf_title": { "prefix": "acf_title", "body": [ "<?php if(!empty($0)){ echo '<h2>'.$0.'</h2>'; } ?>" ], "description": "Output an ACF title field" }, "ACF Link": { "prefix": "acflink", "body": [ "<?php if (!empty($link['title'])): ?>", " <a href=\"<?php echo esc_url($link['url']); ?>\" target=\"<?php echo esc_attr($link['target']); ?>\">", "<?php echo esc_html($link['title']); ?>", "</a>", "<?php endif; ?>" ], "description": "ACF link field with target" }, "ACF Repeater": { "prefix": "acf_repeater", "body": [ "<?php if (!empty($1)): ?>", " <?php foreach ($1 as $$data){ ", "$$field = $$data[''];", " ?>", "<?php } ?>", "<?php endif; ?>" ], "description": "ACF repeater field loop" }, "ACF WYSIWYG": { "prefix": "acf_text", "body": [ "<?php if(!empty($1)){ echo $1; } ?>" ], "description": "ACF WYSIWYG field output" }, "ACF Background Image": { "prefix": "acf_bgimg", "body": [ "style=\"background-image: url('<?php echo esc_url($image['url']); ?>');\"", ], "description": "ACF background image style" }, "ACF Get Options": { "prefix": "acf_getoption", "body": [ "<?php get_field('$1', 'option'); ?>" ], "description": "Get ACF options page field value" } }
Installation Instructions
- Open VS Code
- Go to File > Preferences > Configure User Snippets
- Select "php.json" (or create it if it doesn't exist)
- Paste the entire JSON code above
- Save the file
Tip: After adding these snippets, you can use them by typing the prefix (the part after "prefix" in each snippet) and pressing Tab in your PHP files.
0 Comments