-
Notifications
You must be signed in to change notification settings - Fork 16
Adding Custom Metaboxes
Michiel Tramper edited this page Nov 17, 2022
·
14 revisions
Custom Metaboxes can be added by using the add method, where $values are an array of settings. Multiple blocks of metaboxes can be added to the same post type.
$fields = MakeitWorkPress\WP_Custom_Fields\Framework::instance();
$fields->add( 'meta', $values );
On the highest level, a metabox may have the following keys.
| key | type | description |
|---|---|---|
| title | string | The title for the metabox (required) |
| id | string | The id of the metabox. This is the key under which the meta data will be saved. (required) |
| screen | string or array | The screen to add the metabox to. For example a post type (like ['page', 'post']). Required if type is 'post'. |
| context | string | The context of the metabox. Supports 'normal', 'side' or 'advanced'. Required if type is 'post'. |
| priority | string | The priority of the metabox. Supports 'high', 'low' or 'default'. Required if type is 'post'. |
| type | string | The type of meta box to add. Accepts 'post', 'term' or 'user'. (required) |
| taxonomy | string | The taxonomy to add the metabox to. Required if type is 'term'. |
| single | boolean | If this value is set to true, saves the values by each field id instead of the id of the metabox. Thus, the value of each field are saved under their own metakey. |
| class | string | An optional class for this page. Also supports 'tabs-left' to display tabs to the left. |
| sections | array | The sections, which each have a group of fields. |
This section explains how to retrieve custom metadata.
If type is set to 'post', data can be retrieved in the following way, where $post_id is the id for the post.
$meta = get_post_meta( $post_id, 'metabox_id', true );In this case, $meta then contains an array with all field ids as keys, and obviously their stored values.
If the single value is set to true, the value of each field is stored under a seperate key. This also counts for terms and users.
$meta = get_post_meta( $post_id, 'field_id', true );If type is set to 'term', data can be retrieved in the following way, where $term_id is the id for the term.
$meta = get_term_meta( $term_id, 'metabox_id', true );If type is set to 'user', data can be retrieved in the following way, where $user_id is the id for the user.
$meta = get_user_meta( $user_id, 'metabox_id', true );
The following code adds a custom metabox to pages and posts.
$fields = MakeitWorkPress\WP_Custom_Fields\Framework::instance();
$fields->add( 'meta', array(
'class' => 'tabs-left',
'id' => 'wp_custom_fields_meta',
'title' => __('Page Options', 'wp-custom-fields'),
'screen' => array('page', 'post'),
'single' => false,
'type' => 'post',
'context' => 'normal',
'priority' => 'default',
'sections' => array(
array(
'id' => 'section_1',
'title' => __('Section One', 'wp-custom-fields'),
'icon' => 'camera_enhance',
'fields' => array(
array (
'id' => 'text_field_value_7',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'checkbox',
'subtype' => 'email',
// 'style' => 'switcher switcher-disable',
'options' => array(
'full' => array('label' => __('Enable Fullwidth Content', 'wp-custom-fields') ),
'half' => array('label' => __('Enable Fullwidth Content', 'wp-custom-fields') )
)
),
array(
'title' => __('Example Heading', 'wp-custom-fields'),
'id' => 'thing_heading',
'type' => 'heading',
),
array (
'id' => 'text_field_value',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'input',
'subtype' => 'email',
'sanitize' => 'enabled',
'default' => '[email protected]'
),
array (
'id' => 'text_field_value_2',
'title' => __('Example Title 2', 'wp-custom-fields'),
'description' => __('Example Description 2', 'wp-custom-fields'),
'type' => 'input',
'subtype' => 'url',
'sanitize' => 'enabled',
'default' => 'http://www.pik.nl'
)
)
),
array(
'id' => 'section_2',
'title' => __('Section Two', 'wp-custom-fields'),
'icon' => 'camera_enhance',
'fields' => array(
array(
'id' => 'field1',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'background'
),
array(
'id' => 'field2',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'border'
),
array(
'id' => 'field2',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'boxshadow'
),
array(
'id' => 'field3',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'checkbox',
'options' => array(
'thing_one' => array( 'label' => __('Label One', 'wp-custom-fields') ),
'thing_two' => array( 'label' => __('Label Two', 'wp-custom-fields') )
)
),
array(
'id' => 'field4',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'colorpicker'
),
array(
'id' => 'field5',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'dimension'
),
array(
'id' => 'field6',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'dimensions'
),
array(
'id' => 'field7',
'type' => 'divider'
),
array(
'id' => 'field8',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'editor'
),
array(
'id' => 'field9',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'export',
'option_id' => 'wp_custom_fields_options_2'
),
array(
'id' => 'field9',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'heading'
),
array(
'id' => 'field10',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'icons'
),
array(
'id' => 'field11',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'input'
),
array(
'id' => 'field12',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'location'
),
array(
'id' => 'field13',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'media'
),
array(
'id' => 'field14',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'radio',
'options' => array(
'thing_one' => array( 'label' => __('Label One', 'wp-custom-fields') ),
'thing_two' => array( 'label' => __('Label Two', 'wp-custom-fields') )
)
),
array(
'id' => 'field15',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'select',
'options' => array(
'thing_one' => __('Label One', 'wp-custom-fields'),
'thing_two' => __('Label Two', 'wp-custom-fields')
)
),
array(
'id' => 'field16',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'select',
'subtype' => 'post'
),
array(
'id' => 'field17',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'slider'
),
array(
'id' => 'field18',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'textarea'
),
array(
'id' => 'field19',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'typography'
)
)
)
)
) );The following example adds a metabox to the user profiles:
$fields->add( 'meta', array(
'id' => 'wp_custom_fields_meta_2',
'title' => __('Metabox 2', 'wp-custom-fields'),
'type' => 'user',
'sections' => array(
array(
'id' => 'section_3',
'title' => __('Section Three', 'wp-custom-fields'),
'icon' => 'camera_enhance',
'fields' => array(
array (
'id' => 'text_field_value_5',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'input',
'sanitize' => 'enabled'
)
)
),
)
) );The following example adds a metabox at the term editing screen, in this case for the taxonomy category:
$fields->add( 'meta', array(
'id' => 'wp_custom_fields_meta_3',
'title' => __('Metabox 3', 'wp-custom-fields'),
'type' => 'term',
'taxonomy' => 'category',
'sections' => array(
array(
'id' => 'section_3',
'title' => __('Section Three', 'wp-custom-fields'),
'icon' => 'camera_enhance',
'fields' => array(
array (
'id' => 'text_field_value_5',
'title' => __('Example Title', 'wp-custom-fields'),
'description' => __('Example Description', 'wp-custom-fields'),
'type' => 'input',
'sanitize' => 'enabled'
)
)
),
)
) );WP Custom Fields has been developed by Make it WorkPress