Essential VS Code Snippets for ACF/PHP Development

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

  1. Open VS Code
  2. Go to File > Preferences > Configure User Snippets
  3. Select "php.json" (or create it if it doesn't exist)
  4. Paste the entire JSON code above
  5. 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.