Adding tested code example to the already good answer from @Dave Romsey
It is possible to use Rhyzz repeatable fields for meta-boxes. In fact a short time ago I was building a small testplugin for this! I wanted to get a simple repeatable WYSIWYG field. As this field type has some limitations, it was replaced with a normal textarea element.
So the following code was not live tested and should not be used as is, but should work.
First we must enqueue JQuery sortable, Rhyzz repeatable fields, and our own JS file to init.
/**
* Enqueue our styles and scripts
*/
function prfx_enqueue_scripts() {
// enqueue JQuery sortable
wp_enqueue_script( 'jquery-ui-sortable', array( 'jquery' ) );
// enqueue Rhyzz Repeatable-fields
wp_enqueue_script( 'prfx-repeatable-fields-js', plugins_url('/inc/repeatable-fields/repeatable-fields.js', __FILE__), array( 'jquery' ) );
// enqueue init JS
wp_enqueue_script( 'prfx-init-js', plugins_url('/js/scripts.js', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'prfx_enqueue_scripts', 99 );
Now we create a new meta-box, for an example only on page post-types.
/**
* Create custom metabox
*/
function prfx_add_meta_boxes() {
add_meta_box(
'prfx_repeatable-fields',
'prfx_Repeatable Fields',
'prfx_callback', // see callback function below
'page', // post-type
'normal',
'default'
);
}
add_action('admin_init', 'prfx_add_meta_boxes', 1);
Now we can create our callback function. In this function you will see the table HTML of Rhyzz repeatable fields templates.
I could not use the placeholder {{row-count-placeholder}}, so I ended up just using PHP to increase the row number.
/**
* Callback function of our fields
*/
function prfx_callback() {
global $post;
// check our fields
$repeatable_fields = get_post_meta($post->ID, 'an-input-field', true);
// create a nonce for the field
wp_nonce_field( 'prfx_repeatable_meta_box_nonce', 'prfx_repeatable_meta_box_nonce' ); ?>
<div class="repeat">
<table class="wrapper" width="100%">
<thead>
<tr>
<td width="100%" colspan="4"><span class="add button">Add Editor</span><hr></td>
</tr>
</thead>
<tbody class="container">
<?php if ($repeatable_fields) {
$i = 0;
foreach ($repeatable_fields as $field) {
++$i; ?>
<tr class="row">
<td width="100%" class="td">
<textarea rows="3" id="custom_editor_<?php echo $i; ?>" name="an-input-field[]" class="custom-editor-box"><?php echo $field; ?></textarea>
<p>
<hr>
<span class="move button">Move</span>
<span class="remove button">Remove</span>
</p>
</td>
</tr>
<?php }
} ?>
<!-- template row, if "Add" button is clicked, this template will show -->
<tr class="template row">
<td width="100%">
<textarea rows="3" id="custom_editor_0" name="an-input-field[]" class="custom-editor-box"></textarea>
<p>
<hr>
<span class="move button">Move</span>
<span class="remove button">Remove</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<?php }
And last, but not least, we also need a save function to save our repeatable fields.
/**
* Save our metafields
*/
function prfx_repeatable_meta_box_save($post_id) {
if ( ! isset( $_POST['prfx_repeatable_meta_box_nonce'] ) ||
! wp_verify_nonce( $_POST['prfx_repeatable_meta_box_nonce'], 'prfx_repeatable_meta_box_nonce' ) )
return;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return;
if (!current_user_can('edit_post', $post_id))
return;
if ( isset( $_POST['an-input-field'] ) ) {
$contents = $_POST['an-input-field'];
update_post_meta( $post_id, 'an-input-field', $contents );
}
}
add_action('save_post', 'prfx_repeatable_meta_box_save');
This is the PHP code which is needed, now we just need to fill our scripts.js file like this:
jQuery(document).ready(function($){
$('.repeat').each(function() {
$(this).repeatable_fields({
wrapper: '.wrapper',
container: '.container',
row: '.row',
add: '.add',
remove: '.remove',
move: '.move',
template: '.template',
is_sortable: true,
});
});
});
This example uses a normal textarea element.
Just a heads up if you want to use this technique with a WYSIWYG / editor field: This is more complicated as TinyMCE uses an iframe. For example you need to listen to JQuery sortable to remove the editor on sortable start, and re-add the editor on sortable stop. And also more problems are following (Ive been there).