import LiteYouTubeEmbed from 'react-lite-youtube-embed'; import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import FAQ from '@site/src/components/FAQ';

Creating custom fields with code is suitable if you want to keep everything in your themes or plugins. This way, you can re-use them in many websites and put them under a version control like Git.

To create custom fields, you will need to use the filter rwmb_meta_boxes to register field groups. This filter accepts one parameter - the array of field groups:

add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = [
        'title'      => 'Event details',
        'post_types' => 'event',
        'fields'     => [
            [
                'name' => 'Date and time',
                'id'   => 'datetime',
                'type' => 'datetime',
            ],
            [
                'name' => 'Location',
                'id'   => 'location',
                'type' => 'text',
            ],
            [
                'name'          => 'Map',
                'id'            => 'map',
                'type'          => 'osm',
                'address_field' => 'location',
            ],
        ],
    ];

    // Add more field groups if you want
    // $meta_boxes[] = ...

    return $meta_boxes;
} );

Each field group has several settings and a list of fields, which we will cover below.

Each field group has several settings for the location or appearance. Please see the list below:

:::info Media modal limitation

Only simple fields such as text, select, radio, checkbox work in the media modal. Other fields that require custom JavaScript do not work.

:::

The plugin supports the following contexts (locations) where a field group can appear:

:::warning Gutenberg

Gutenberg editor only supports normal and side contexts. Other extra contexts are not supported.

:::

Fields are added to a field group via the key fields. Each field is an array of settings.

Meta Box supports more than 40 field types. They share some common settings but also offer unique settings per field type.

When adding a field, you need to know what type it is and how it works. Understanding that helps you choose the right type of field and, therefore, the right type of data that you want to add to your posts.

Below is the list of supported field types in alphabetical order with a brief description. The field type key is used for reference in code. For how they look like and how to use them, please see details in the Field types menu.

These are the basic and most used field types that do not require any extra library. The UI of these fields is WordPress-native.

These are the advanced field types that usually need an additional library to provide a user-friendly UI.

Besides, some field types that are rarely used and we would not recommend using them because their UI is not as good and native as other fields.

:::warning

These are field types that use the built-in browser UI without extra libraries. The UI might be different across operating systems and browsers. Please use with care.

:::

These are field types that help you select a WordPress object.

These are field types that help you upload media files.

These are field types that help you organize and improve the UI of the fields.

Each field contains settings to determine where and how data is loaded and saved. All fields share some common settings, but also offer unique settings per field type. There are also settings from extensions which are explained on each extension docs.

Below is the list of settings with a brief description. The keys are for reference in code.

:::tip Field ID prefix

You can add a prefix to field IDs to prevent using the same ID with other scripts. If you want to hide the fields in the default WordPress Custom Fields meta box, use underscore (_) as the prefix.

:::

Besides all common settings, each field type can have its own settings. Please see more details for each field type on the left menu.

:::tip Code examples

To save time reading and writing settings for fields, we have already prepared some code examples that you can get from Meta Box Code Snippet Library.

:::

For text field type, you can omit the type settings, like this:

add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = [
        'title'      => 'Event details',
        'post_types' => 'event',
        'fields'     => [
            [
                'name' => 'Date and time',
                'id'   => 'datetime',
                'type' => 'datetime',
            ],
            // highlight-start
            [
                'name' => 'Location',
                'id'   => 'location',
            ],
            // highlight-end
            [
                'name'          => 'Map',
                'id'            => 'map',
                'type'          => 'osm',
                'address_field' => 'location',
            ],
        ],
    ];

    return $meta_boxes;
} );

And if the id of the field can be auto-generated from the field name, you can omit it and define the field as a simple string:

add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = [
        'title'      => 'Event details',
        'post_types' => 'event',
        'fields'     => [
            [
                'name' => 'Date and time',
                'id'   => 'datetime',
                'type' => 'datetime',
            ],
            // highlight-next-line
            'Location',
            [
                'name'          => 'Map',
                'id'            => 'map',
                'type'          => 'osm',
                'address_field' => 'location',
            ],
        ],
    ];

    return $meta_boxes;
} );

This video shows you all the field types and field settings:

The mechanism of std in Meta Box works only if the field group has not been saved before. It means all fields in that field group, not just the specific field that you set the std for. So if there is any field that already has value, then std will not work for other fields, even new fields you have just added.

Examples:

When you create a new post, then no fields have values (of course), then std works for all fields.

When you edit an existing post that has a field group, then some fields might have values. Therefore, std does not work for all fields. In this case, if you edit the field group and add a new field, std still does not work for that new field (even it has no value before), because the field group has been saved before.

There are some situations where the context does not work as expected. That is probably because you have dragged and dropped the field groups to reorder them. If you have, then WordPress will save the position/location of them and use the saved position instead of the value in the context parameter. The order of field groups is saved in the user meta meta-box-order_{screen id} as follows:

In this case, deleting this user meta from the database will make the context work again.