Creating a new Carbon Field
Step-by-step guide on how to create a new Carbon Field.
The Carbon Fields library has many built-in fields, but you may find it necessary to define a new type of field for your specific project needs.
The following tutorial will explain how to create a custom Carbon Field.
Step 1: Download the template
To make it as easy as possible, we have prepared a Carbon Field template that contains a frame for the PHP Carbon Field class and a webpack build process.
You can download the template from here: https://github.com/htmlburger/carbon-field-template
/src- field files folder
/languages- folder for .po, .mo and .pot files
/core- folder for all of your .php files
/field.php- bootstrapping php code
Step 2: Name your field
yourfieldname (case sensitive) placeholders in all files. Also rename the files that contain the placeholders.
NB! If your field name contains multiple words, for example Image Gallery, your class names should look like this:
- PHP class:
- Field Component Registration:
Step 3: Build assets
composer dump-autoloadto create the required
autoload.phpwhich needs to be included in your theme.
yarn installin the root directory to install all build process requirements.
yarn buildto build the final minimized bundle
yarn start to continuously build bundle during development. Note that you should add
define( 'SCRIPT_DEBUG', true ); to your
wp-config.php file in order to load the files generated by the dev build process.
Step 4: Customize
Here is a quick overview of some of the methods you can customize:
You can use this method to modify the field properties that are passed to the React component which represents the field.
Used for initialization processes that are called once per field type (e.g. setup localization files).
Called for each field instance when the field is initialized. (back-end)
Called for each field instance when the field is initialized. (back-end, front-end)