Advanced: Support Your Custom ACF Field Types

Advanced Custom Fields allows you to create your own type of field. This may be necessary to save & load unique data. This guide will teach you how to enable support for these custom field types.

What Are Custom ACF Field Types

These are field types created to handle specific data pieces that can't be handled using the default field types provided by ACF. To learn more about how this works, you can read ACF's documentation: Creating a new field type.

Following the acf-example-field-type provided by ACF, we have modified that same example field to be a 'soflyy_field' type instead.

All code examples shared here can be added to your child's theme functions.php file or in a plugin like Code Snippets.

Step 1: Define the New Class Required

You first define the class to use for your new field type. The code requires that you have a class defined with the expected methods and properties. It must extend the Field class defined in wpai_acf_add_on\fields\Field.

As a starting point, we used the existing FieldText class as a template (found in wpai-acf-add-on/src/fields/acf/FieldText.php).

The class should have, at a minimum:

• The $type property.
• A 'parse' method. 
• An 'import' method.

Here's our new class to import the new 'soflyy_field' type.

namespace wpai_acf_add_on\fields\acf;

use wpai_acf_add_on\ACFService;
use wpai_acf_add_on\fields\Field;

/**
 * Class FieldSoflyyField
 * @package wpai_acf_add_on\fields\acf
 */
class FieldSoflyyField extends Field {

    /**
     *  Field type key
     */
    public $type = 'soflyy_field';

    /**
     *
     * Parse field data
     *
     * @param $xpath
     * @param $parsingData
     * @param array $args
     */
    public function parse($xpath, $parsingData, $args = array()) {
        parent::parse($xpath, $parsingData, $args);
        $values = $this->getByXPath($xpath);
        $this->setOption('values', $values);
    }

    /**
     * @param $importData
     * @param array $args
     * @return mixed
     */
    public function import($importData, $args = array()) {
        $isUpdated = parent::import($importData, $args);
        if (!$isUpdated){
            return FALSE;
        }
        ACFService::update_post_meta($this, $this->getPostID(), $this->getFieldName(), $this->getFieldValue());
    }
}

When the import runs, the import method from this defined class will be called to handle the actual saving of your custom ACF field type. 

We have stored this class file in a small custom WordPress plugin.

Step 2: Load the Newly Defined Class

Use the filter 'wp_all_import_acf_field_class' to load the class you just defined. Here's the code to load the new class FieldSoflyyField that we have just created:

function my_soflyy_field( $class , $fieldData, $post, $fieldName, $fieldParent ) {
	if ($fieldData['type'] == 'soflyy_field'){
		// Check if the class is not already defined
        if (!class_exists('\wpai_acf_add_on\fields\acf\FieldSoflyyField')) {
            // Include the file containing the FieldSoflyyField class from our custom plugin
            require_once MY_CUSTOM_PLUGIN_ROOT_DIR . '/classes/FieldSoflyyField.php';
        }
		return '\wpai_acf_add_on\fields\acf\FieldSoflyyField';
	} else {
		return $class;
	}
}
add_filter( 'wp_all_import_acf_field_class', 'my_soflyy_field', 10, 5 );

Note that the class you return must already be defined in PHP, as WP All Import will only check if it exists and then create an object using it. It won't try to automatically load the file containing it.

Step 3: Define the View in the Import Screen

Once you've defined the class and enabled it via the correct hook, you can load the PHP view file that will show the input field when this field type is being mapped in Step 3 of the import process.

Here's our SoflyyField.php view file:

<input
    type="text"
    placeholder=""
    value="<?php echo esc_attr( $current_field );?>"
    name="fields<?php echo $field_name;?>[<?php echo $field['key'];?>]"
    class="text widefat rad4"/>

For this example, we have uploaded the view file to our small custom WordPress plugin, and then we've loaded that file using the wp_all_import_acf_field_view_path_soflyy_field hook. Here's the relevant code:

function my_path_soflyy_field( $filePath, $field ) {
	$customFile = MY_CUSTOM_PLUGIN_ROOT_DIR . '/views/SoflyyField.php';
	return $customFile;
}
add_filter( 'wp_all_import_acf_field_view_path_soflyy_field', 'my_path_soflyy_field', 10, 2 );

You have to update the filter name and swap 'soflyy_field' with your own field type slug, as this filter name is dynamic.

After including all of the required code, you'll be able to see the correct input field for your new field type when mapping the import template. Here's how our example looks:

Other Hooks to Enable Support for Your Own ACF Field Type

Here's more information on the other available hooks that can be used when enabling support for your own ACF field type:

wp_all_import_acf_field_view_dir_soflyy_field

Used to specify the location of the header and footer for fields that have ACF v4 and v5 versions, such as checkbox (optional): 

 $header = $fieldDir . DIRECTORY_SEPARATOR . 'header.php';
 $footer = $fieldDir . DIRECTORY_SEPARATOR . 'footer.php';

wp_all_import_acf_field_template_header_pathsoflyy_field

Used for the header that appears before the version-specific header used above. Only needed when the default header doesn't meet your requirements.

wp_all_import_acf_field_template_footer_pathsoflyy_field

Used for the footer that appears after the version-specific footer used above. Only needed when the default footer doesn't meet your requirements.

wp_all_import_acf_field_field

Use the $fieldData['type'] value to determine if you should override the default.
This is used to return your custom field object if you don't want to use the default class loading behavior from the hook wp_all_import_acf_field_class shown above. 

Either approach (class or field) requires that you have a class defined with the expected methods and properties, which extends from the Field class defined in the ACF Import Add-On.

Related Docs

Learn how to import Advanced Custom Fields using WP All Import.

Learn more about exporting Advanced Custom Fields with WP All Export.

Shows you how to use PHP functions or custom PHP functions during import.