Meta Box Columns
Meta Box Columns helps you put custom fields into columns in a 12-column grid. You can create nested columns for sub-fields in groups or put multiple fields into one column.
Simple syntax​
To specify number of columns for each field, add columns
parameter for that field. The plugin will automatically calculate number of columns and wrap fields into a div "row" and apply styles for them.
The code below registers some fields and make each field obtain 4 columns of the grid (thus, you'll see 3 columns layout):
add_filter( 'rwmb_meta_boxes', 'prefix_columns_demo_register' );
function prefix_columns_demo_register( $meta_boxes ) {
$meta_boxes[] = array(
'title' => 'Meta Box Columns Demo',
'fields' => array(
array(
'name' => 'Name',
'id' => 'name',
'type' => 'text',
// Number of columns (in grid 12)
'columns' => 4,
),
array(
'name' => 'Email',
'id' => 'email',
'type' => 'email',
'columns' => 4,
),
array(
'name' => 'Mobile',
'id' => 'mobile',
'type' => 'text',
'columns' => 4,
),
),
);
return $meta_boxes;
}
Advanced syntax​
The advanced syntax is helpful if you need to put multiple fields in 1 column.
add_filter( 'rwmb_meta_boxes', 'prefix_register_meta_boxes' );
function prefix_register_meta_boxes( $meta_boxes ) {
$meta_boxes[] = array(
'id' => 'test-columns',
'title' => 'Meta Box Columns Demo',
'columns' => array(
'column-1' => 4, // Define the size of the column (from 1 to 12)
'column-2' => array( // More advanced syntax
'size' => 8, // Column size (1-12)
'class' => 'custom-css-class', // Custom CSS class for the column
),
),
'fields' => array(
array(
'name' => 'Name',
'id' => 'name',
'type' => 'text',
'column' => 'column-1',
),
array(
'name' => 'Email',
'id' => 'email',
'type' => 'email',
'column' => 'column-1',
),
array(
'name' => 'State',
'id' => 'state',
'type' => 'select_advanced',
'options' => array(
'NY' => 'New York',
'CA' => 'California',
),
'column' => 'column-2',
),
array(
'name' => 'Description',
'id' => 'description',
'type' => 'textarea',
'column' => 'column-2',
),
),
);
return $meta_boxes;
}
In the advanced syntax, you need to define a parameter columns
for the meta box. It's the list of columns for all fields in the following format:
'columns' => array(
'column-1' => 4, // Define the size of the column (from 1 to 12)
'column-2' => array( // More advanced syntax
'size' => 4, // Column size (1-12)
'class' => 'custom-css-class', // Custom CSS class for the column
),
),
Then each field in the meta box need to specify which column it belongs to by setting 'column' => 'column-0'
.
Notes​
This extension uses 12-columns grid, so when defining number of columns, you must define them so that the total columns for each row equals to 12.
For example:
- Row 1: field 1 (3 columns), field 2 (3 columns), field 3 (3 columns), field 4 (3 columns)
- Row 2: field 5 (6 columns), field 6 (6 columns)
- Row 3: field 7 (12 columns)