Carbon Fields extension, that adds a Rich Text field type with no media.
This package is auto-updated.
Last update: 2021-01-11 03:47:41 UTC
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.
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
/assets/css- css folder
/languages- folder for .po, .mo and .pot files
/core- folder for all of your .php files
/field.php- bootstrapping php code
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:
- React Component Registration:
webpack.config.jsand make sure
const rootpoints to the directory where Carbon Fields are installed (e.g.
const root = path.resolve(__dirname, '../vendor/includes/htmlburger/carbon-fields');)
npm installin the root directory to install all build process requirements.
npm run buildto build the final minimized assets
npm run dev to continuously build assets 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.
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)