Creating a new field type

Overview

The Advanced Custom Fields plugin is packed with loads of useful field types such as text, image and WYSIWYG. However, when working on a project, it may be necessary to create a new type of field to save & load unique data.

This guide will demonstrate how to create a new field type for the ACF plugin.

Download

To make life easier, we put together a comprehensive template for creating an ACF field type, complete with an NPM script that get you up and running even faster.

A screenshot of the ACF Example Field Type repository

ACF Example Field Type template on Github

Please download or clone the ACF Example Field Type repository. Alternatively, you can click the green “Use this template” button to create a new repository based on this template.

https://github.com/AdvancedCustomFields/acf-example-field-type

Once you’ve downloaded the template, follow the steps in the README to get started on your custom field type.

Customization

All logic for your field’s appearance and functionality is defined in the acf-FIELD-NAME/class-PREFIX-acf-field-FIELD-NAME.php file. This class extends the acf_field class, which is packed full of powerful functions which allow you to customize how data is saved and displayed! Each function is documented with internal comments, so it is best to open up the file and read it over top to bottom.

Here is a quick overview of the functions:

Name Description
__construct Initialize function which sets the field’s data such as name, label, category and defaults
render_field_settings Create extra settings for your field. These are visible when editing a field
render_field Create the HTML interface for your field
input_admin_enqueue_scripts Enqueue CSS + JavaScript to assist your render_field() function
input_admin_head Add inline CSS and JavaScript to assist your render_field() function
input_form_data Add hidden inline HTML
input_admin_footer Add inline CSS and JavaScript to assist your render_field() function
load_value This filter is applied to the $value after it is loaded from the db
update_value This filter is applied to the $value before it is saved in the db
format_value This filter is applied to the $value before being returned to template API
validate_value This filter is used to perform validation on the value prior to saving
delete_value This action is fired after a value has been deleted from the db

The above are only some of the functions available in the acf_field class. Please read over the extended comments found above each function to learn more.