Custom field type

Edit this page on Github

Overview

Meta Box plugin is so flexible that you can create your own field type easily. This documentation will show you how to create a new field type phone which accepts the only phone in format xxx-xxxx.

Field class

We need create a class name RWMB_Phone_Field for phone field. Generally, if we want to create a new field type, we need create a class name RWMB_{$field_type}_Field (make sure it has a correct case) extending RWMB_Field class.

if ( class_exists( 'RWMB_Field' ) ) {
    class RWMB_Phone_Field extends RWMB_Field {
    }
}

Save this class in a PHP file with any name, assuming field-phone.php. Then include that file in functions.php file of your theme or in plugin’s file:

add_action( 'init', 'prefix_load_phone_type' );
function prefix_load_phone_type() {
    require 'path/to/field-phone.php';
}

We use init action to make sure all Meta Box files are loaded and class RWMB_Field is defined.

Methods

The phone class inherits all methods from RWMB_Field class. The full list of RWMB_Field methods and their description are described in this documentation.

For phone field, we have to define content of html method to define field HTML:

public static function html( $meta, $field ) {
    return sprintf(
        '<input type="tel" name="%s" id="%s" value="%s" pattern="d{3}-d{4}">',
        $field['field_name'],
        $field['id'],
        $meta
    );
}

Here we use new HTML5 input type tel with new attribute pattern to force users to enter correct phone number format xxx-xxxx.

For this field, we don’t need to handle saving or retrieving meta value or enqueueing scripts and styles. Everything is handled automatically by the Meta Box plugin.

The complete code for this class is the following:

if ( class_exists( 'RWMB_Field' ) ) {
    class RWMB_Phone_Field extends RWMB_Field {
        public static function html( $meta, $field ) {
            return sprintf(
                '<input type="tel" name="%s" id="%s" value="%s" pattern="d{3}-d{4}">',
                $field['field_name'],
                $field['id'],
                $meta
            );
        }
    }
}

Using new field type

Now we can register fields with phone type, like this:

$meta_boxes[] = array(
    'title' => 'Test',
    'fields' => array(
        array(
            'name' => 'Phone',
            'id'   => 'field_id',
            'type' => 'phone',
        ),
        // Other fields
    ),
);

Now when you go to edit post page, you’ll see a new field like this:

That’s all for this simple field type. If you want to create a more complicated field, just overwrite methods from RWMB_Field class. You might want to enqueue scripts and styles, sanitizing field value before saving in the database, etc. The RWMB_Field class has all methods for that you just need to overwrite necessary methods.

Notes

If you need to make the field cloneable using the same clone feature in Meta Box, it’s recommended to add a CSS class to your inputs that start with rwmb. The clone script will automatically detect all the inputs started with rwmb and set the correct id and name attribute.

Edit this page on Github