The group field behaves like a container, that is, you can add fields within a group. This field could be used to create galleries, sliders, portfolios, playlist or any other content that takes several fields grouped.
So let’s imagine that we want to create a playlist of several videos.
Basic usage:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
add_action( 'xbox_init', 'playlist_metabox'); function playlist_metabox(){ $options = array( 'id' => 'metabox-id', 'title' => 'Playlist Metabox', ); $xbox = xbox_new_metabox( $options ); $group = $xbox->add_group( array( 'name' => 'Playlist', 'id' => 'playlist', 'options' => array( 'add_item_text' => __('New video', 'textdomain'), ), 'controls' => array( 'name' => 'Video #' ) )); $group->add_field(array( 'id' => 'video-name', 'name' => __( 'Video name', 'textdomain' ), 'type' => 'text', )); $group->add_field(array( 'id' => 'video-image', 'name' => __( 'Video image', 'textdomain' ), 'type' => 'file', )); $group->add_field(array( 'id' => 'video-url', 'name' => __( 'Video url', 'textdomain' ), 'type' => 'oembed', )); } |
Result:
By default an empty group is created, but you can add more from the “New video” button:
Advanced usage, with available options:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
add_action( 'xbox_init', 'playlist_metabox'); function playlist_metabox(){ $options = array( 'id' => 'metabox-id', 'title' => 'Playlist Metabox', ); $xbox = xbox_new_metabox( $options ); $group = $xbox->add_group( array( 'name' => 'Playlist', 'id' => 'playlist', 'options' => array( 'add_item_text' => __('New video', 'textdomain'), 'remove_item_text' => '', 'sortable' => true, ), 'controls' => array( 'name' => 'Video #', 'readonly_name' => true,//Determines whether the control input will be editable. Default: true 'images' => true,//Use images on the controls. Default: false 'default_image' => XBOX_URL.'/img/transparent.png', 'image_field_id' => 'video-image',//Id of the field where the image will be taken. See the second field. (File field) 'position' => 'top',//Control position. top, left. Default: top 'width' => '',//Width of the control 'height' => '',//Height of the control 'left_actions' => array(//Buttons on the left of the control. 'xbox-info-order-item' => '#' ), 'right_actions' => array(//Buttons on the right of the control. 'xbox-duplicate-group-item' => '<i class="dashicons dashicons-admin-page"></i>', 'xbox-remove-group-item' => '<i class="xbox-icon xbox-icon-trash"></i>' ), ) )); $group->add_field(array( 'id' => 'video-name', 'name' => __( 'Video name', 'textdomain' ), 'type' => 'text', )); $group->add_field(array( 'id' => 'video-image', 'name' => __( 'Video image', 'textdomain' ), 'type' => 'file', )); $group->add_field(array( 'id' => 'video-url', 'name' => __( 'Video url', 'textdomain' ), 'type' => 'oembed', )); } |
Result:
Getting saved value:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$xbox = Xbox::get( 'metabox-id' ); $value = $xbox->get_field_value( 'playlist' ); var_dump($value); //Return: array(3) { [0]=> array(4) { ["video-name"]=> string(20) "The Weeknd - Starboy" ["video-image"]=> string(95) "http://wp.dev/wp-content/---.jpg" ["video-image_id"]=> string(2) "14" ["video-url"]=> string(43) "https://www.youtube.com/watch?v=dMMUH_ZpbB0" } [1]=> array(4) { ["video-name"]=> string(12) "Video name 2" ["video-image"]=> string(80) "http://wp.dev/wp-content/---.jpg" ["video-image_id"]=> string(2) "12" ["video-url"]=> string(43) "https://www.youtube.com/watch?v=ANS9sSJA9Yc" } [2]=> array(4) { ["video-name"]=> string(12) "Video name 3" ["video-image"]=> string(100) "http://wp.dev/wp-content/---.jpg" ["video-image_id"]=> string(2) "11" ["video-url"]=> string(0) "" } } |
Nested groups are supported, up to two levels, that is, you can add a group within a group.