New Check out the curated list of the finest design resources I've gathered for you! Take a look →

How to Build Custom Blocks with WordPress ACF

Are you looking to build a custom WordPress website that matches your design and functionality needs? Creating custom blocks with WordPress ACF (Advanced Custom Fields) can help you achieve just that. In this tutorial, I will guide you on how to build custom blocks with WordPress ACF.

Building Custom Blocks with WordPress ACF

Before we begin, let’s first understand what custom blocks are. Custom blocks are reusable content blocks that you can create using WordPress ACF. They can be added to your website pages and posts, just like any other WordPress block.

Register and Set Up for Building Custom Blocks with WordPress ACF

To get started, you’ll need to backup your functions.php file, in case any errors occur. Follow these steps to register a simple block:

  1. Copy the code below into your functions.php file:
/* ======================================================================== */
/* Register Custom Block Using ACF */
/* ======================================================================== */
add_action('acf/init', 'rzwn_init_block_types');
function rzwn_init_block_types(){

  if(function_exists('register_block_type')){
    register_block_type(get_template_directory() . "/template-parts/blocks/simple-block/block.json");
  }
	
}

Note: This code only works for ACF v6 or above.

  1. Create a new file for your block.json, PHP file, and directory folder with the code provided below:
|-- template-parts
        |-- blocks
                |-- simple-block
                        |-- block.json
                        |-- simple-block.php
  1. Copy and paste this code into your block.json file:
{
  "name": "acf/simple-block",
  "title": "Simple block",
  "icon": "button",
  "apiVersion": 2,
  "acf": {
      "renderTemplate": "./simple-block.php",
      "mode": "preview"
  }
}
  1. Create a new field group and set the location rules to show the field group only if the block is equal to “Simple block” inside ACF.
Create a new field group to Build Custom Blocks with WordPress ACF
Create a new field group to Build Custom Blocks with WordPress ACF

Check Your Block Editor

To ensure everything is working properly, follow these steps:

  1. Go to your post, click the toggle block inserter, and you will see the new block registered there.
New block registered
New block registered
  1. Drag or double-click the new block to check if it works properly in the block editor or Front-end.
Works properly on Block-Editor and Front-End
Works properly on Block-Editor and Front-End

Tips and Tricks for Creating Custom Blocks

Creating custom blocks can be a bit challenging, but with these tips and tricks, you’ll be able to create custom blocks with ease:

  1. To create a new block, add "keywords": ["name your block",] to your block.json file.
{
  "name": "acf/simple-block",
  "title": "Simple block",
  "icon": "button",
  "keywords": ["name your block"],
  "apiVersion": 2,
  "acf": {
      "renderTemplate": "./simple-block.php",
      "mode": "preview"
  }
}
Add keywords
Add keywords
  1. To add custom CSS to your block, add "style": [ "file:./new-block.css" ] to your block.json file. Make sure to place the CSS file in the same directory.
{
  "name": "acf/simple-block",
  "title": "Simple block",
  "icon": "button",
  "keywords": ["name your block"],
  "apiVersion": 2,
	"style": [ "file:./new-block.css" ],
  "acf": {
      "renderTemplate": "./simple-block.php",
      "mode": "preview"
  }
}
Custom CSS registered
Custom CSS registered
  1. To add custom JS, you need to register new scripts in your functions.php file and initialize them in your block.json file.
// Register the JS function for block: Simple Block
wp_register_script(
	'simple-demo-script',
	get_template_directory_uri() . '/assets/js/simple-demo.js',
	array('jquery'),
	'1.0.0',
	true
);
{
  "name": "acf/simple-block",
  "title": "Simple block",
  "icon": "button",
  "keywords": ["name your block"],
	"style": [ "file:./new-block.css" ],
  "script": [ "simple-demo-script" ],
  "apiVersion": 2,
  "acf": {
      "renderTemplate": "./simple-block.php",
      "mode": "preview"
  }
}
Custom CSS registered
Custom JS registered

By following the steps outlined in this tutorial, you can easily create your custom blocks with WordPress ACF. Remember to backup your functions.php file before making any changes, and if you encounter any issues, you can always revert to the backup.

also by creating custom blocks, you can tailor your website to meet your design and functionality needs, ultimately making it more user-friendly for your visitors.

If you want to learn more, check out other WordPress development tutorials or case studies. Remember, creating custom blocks can help your website match your design and adjust your blocks to fit your needs.

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment