I have a metabox that is using repeatable fields, however I need to re-use the repeatable fields in a more user-friendly fashion than simply by showing an input bar.
Ideally I would like to be able to use the wp_editor for this, as the people using it will usually have little to no HTML programming experience, and will need to use formatting.
Below is my repeatable fields code using Inputs (it is using two inputs, but I will only be using one with the other function). How can I translate this so that I can use the wp_editor, or at least text boxes?
function hhs_get_sample_options() {
$options = array (
'Option 1' => 'option1',
'Option 2' => 'option2',
'Option 3' => 'option3',
'Option 4' => 'option4',
);
return $options;
}
add_action('admin_init', 'hhs_add_meta_boxes', 1);
function hhs_add_meta_boxes() {
add_meta_box( 'repeatable-fields', 'Emergency Contacts', 'hhs_repeatable_meta_box_display', 'team', 'normal', 'default');
}
function hhs_repeatable_meta_box_display() {
global $post;
$repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);
$options = hhs_get_sample_options();
wp_nonce_field( 'hhs_repeatable_meta_box_nonce', 'hhs_repeatable_meta_box_nonce' );?>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$( '#add-row' ).on('click', function() {
var row = $( '.empty-row.screen-reader-text' ).clone(true);
row.removeClass( 'empty-row screen-reader-text' );
row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
return false;
});
$( '.remove-row' ).on('click', function() {
$(this).parents('tr').remove();
return false;
});
});
</script>
<table id="repeatable-fieldset-one" width="100%">
<thead>
<tr>
<th width="40%">Name</th>
<th width="40%">Phone Number</th>
<th width="8%"></th>
</tr>
</thead>
<tbody>
<?php
if ( $repeatable_fields ) :
foreach ( $repeatable_fields as $field ) {
?>
<tr>
<td><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>" /></td>
<td><input type="text" class="widefat" name="phone[]" value="<?php if ($field['phone'] != '') echo esc_attr( $field['phone'] ); else echo 'http://'; ?>" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
</tr>
<?php
}
else :
// show a blank one
?>
<tr>
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="text" class="widefat" name="phone[]" value="" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
</tr>
<?php endif; ?>
<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="text" class="widefat" name="phone[]" value="" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
</tr>
</tbody>
</table>
<p><a id="add-row" class="button" href="#">Add another</a></p>
<?php
}
add_action('save_post', 'hhs_repeatable_meta_box_save');
function hhs_repeatable_meta_box_save($post_id) {
if ( ! isset( $_POST['hhs_repeatable_meta_box_nonce'] ) ||
! wp_verify_nonce( $_POST['hhs_repeatable_meta_box_nonce'], 'hhs_repeatable_meta_box_nonce' ) )
return;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return;
if (!current_user_can('edit_post', $post_id))
return;
$old = get_post_meta($post_id, 'repeatable_fields', true);
$new = array();
$options = hhs_get_sample_options();
$names = $_POST['name'];
$phones = $_POST['phone'];
$count = count( $names );
for ( $i = 0; $i < $count; $i++ ) {
if ( $names[$i] != '' ) :
$new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
if ( $phones[$i] == '' )
$new[$i]['phone'] = '';
else
$new[$i]['phone'] = stripslashes( $phones[$i] ); // and however you want to sanitize
endif;
}
if ( !empty( $new ) && $new != $old )
update_post_meta( $post_id, 'repeatable_fields', $new );
elseif ( empty($new) && $old )
delete_post_meta( $post_id, 'repeatable_fields', $old );
}
Also, I am using textboxes and wp-editor in different metaboxes across this site (again, I'm not the primary user of this, and the people who are don't know HTML), and I have tried copy/pasting code from place to place trying to combine the two sets of code, with no luck so far.
EXAMPLE (tried replacing input fields with wp_editor)
function sops_get_sample_options() {
$options = array (
'Option 1' => 'option1',
'Option 2' => 'option2',
'Option 3' => 'option3',
'Option 4' => 'option4',
);
return $options;
}
add_action('admin_init', 'sops_add_meta_boxes', 1);
function sops_add_meta_boxes() {
add_meta_box( 'sops-repeatable-fields', 'SOP Steps', 'sops_repeatable_meta_box_display', 'sops', 'normal', 'default');
}
function sops_repeatable_meta_box_display() {
global $post;
$repeatable_fields = get_post_meta($post->ID, 'repeatable_fields_sops', true);
$options = sops_get_sample_options();
wp_nonce_field( 'sops_repeatable_meta_box_nonce', 'sops_repeatable_meta_box_nonce' );
?>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$( '#add-row' ).on('click', function() {
var row = $( '.empty-row.screen-reader-text' ).clone(true);
row.removeClass( 'empty-row screen-reader-text' );
row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
return false;
});
$( '.remove-row' ).on('click', function() {
$(this).parents('tr').remove();
return false;
});
});
</script>
<table id="repeatable-fieldset-one" width="100%">
<thead>
<tr>
<th width="80%" align="left">SOP Steps</th>
<th width="8%"></th>
</tr>
</thead>
<tbody>
<?php
if ( $repeatable_fields_sops ) :
foreach ( $repeatable_fields_sops as $field ) {
?>
<tr>
<td>
<?php
$sops_steps_value= get_post_meta($_GET['post'], 'name[]' , true ) ;
wp_editor( $sops_steps_value, 'name[]', $settings = array('textarea_name'=>'name[]') );
?>
</td>
<td><a class="button remove-row" href="#">Remove</a></td>
</tr>
<?php
}
else :
// show a blank one
?>
<tr>
<td>
<?php
$sops_steps_value= get_post_meta($_GET['post'], 'name[]' , true ) ;
wp_editor( $sops_steps_value, 'name[]', $settings = array('textarea_name'=>'name[]') );
?>
<td><a class="button remove-row" href="#">Remove</a></td>
</tr>
<?php endif; ?>
<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
<td>
<?php
$sops_steps_value= get_post_meta($_GET['post'], 'name[]' , true ) ;
wp_editor( $sops_steps_value, 'name[]', $settings = array('textarea_name'=>'name[]') );
?>
<td><a class="button remove-row" href="#">Remove</a></td>
</tr>
</tbody>
</table>
<p><a id="add-row" class="button" href="#">Add another</a></p>
<?php
}
add_action('save_post', 'sops_repeatable_meta_box_save');
function sops_repeatable_meta_box_save($post_id) {
if ( ! isset( $_POST['sops_repeatable_meta_box_nonce'] ) ||
! wp_verify_nonce( $_POST['sops_repeatable_meta_box_nonce'], 'sops_repeatable_meta_box_nonce' ) )
return;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return;
if (!current_user_can('edit_post', $post_id))
return;
$old = get_post_meta($post_id, 'repeatable_fields_sops', true);
$new = array();
$options = sops_get_sample_options();
$names = $_POST['name'];
$count = count( $names );
for ( $i = 0; $i < $count; $i++ ) {
if ( $names[$i] != '' ) :
$new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
endif;
}
if ( !empty( $new ) && $new != $old )
update_post_meta( $post_id, 'repeatable_fields_sops', $new );
elseif ( empty($new) && $old )
delete_post_meta( $post_id, 'repeatable_fields_sops', $old );
}
