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