wordpress metabox merge select + input text

Question

I'm going to break my brain..

I've created a new metabox for my custom post type "book". I'm using a lot of different type of fields like input text, checkbox, select, textarea, taxonomy select and repeatable and everything work great!

But now I'd like to do a more difficult step..

Is it possible to do a repeatable field with 2 fields inside it? I would like have a select and an input text near it.. inside the select admin can choose the shop (es. Ibs or Amazon) and in the input field he can write the url for sell the book.

This is my code:

/* META Book */
function add_mycustom_meta_box() {  
    add_meta_box(  
        'custom_meta_box',
        'Info book', 
        'show_custom_meta_box', // $callback  
        'product',
        'normal',
        'high');
}


// Field Array
$prefix = 'custom_';  
$custom_meta_fields = array( 

array(  
    'label' => 'Link vendita',  
    'desc'  => 'Inserisci l url dei siti esterni',  
    'id'    => $prefix.'repeatable',  
    'type'  => 'repeatable',
    'options' => array(
        'amazon' => array(
            'label' => 'Amazon',
            'value' => 'amazon'
        ),
        'ibs' => array(
            'label' => 'Ibs',
            'value' => 'ibs'
        )
    )
    )

);  

// Callback
function show_custom_meta_box() {  
global $custom_meta_fields, $post;  
// Use nonce for verification  
echo '<input type="hidden" name="custom_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />';  

// Build metabox  
echo '<table class="form-table">';  
foreach ($custom_meta_fields as $field) {  
// get value of this field if it exists for this post  
$meta = get_post_meta($post->ID, $field['id'], true);  
// begin a table row with  
echo '<tr> 
<th><label for="'.$field['id'].'">'.$field['label'].'</label></th> 
<td>';  
switch($field['type']) { 



// if repeatable 
case 'repeatable':

echo '<a class="repeatable-add button" href="#">+</a> 
      <ul id="'.$field['id'].'-repeatable" class="custom_repeatable">';  
$i = 0;  

if ($meta) {

foreach($meta as $row) {
     echo '<li><span class="sort hndle">|||</span>';

    // Select ibis or amazon
    echo '<select name="'.$field['id'].'" id="'.$field['id'].'">';

    foreach ($field['options'] as $option) {
          echo '<option', $row == $option['value'] ? ' selected="selected"' : '', ' value="'.$option['value'].'">'.$option['label'].'</option>';
    }

    echo '</select>';
    // end select

echo '<input type="text" name="'.$field['id'].'['.$i.']" id="'.$field['id'].'" value="'.$row.'" size="30" data-shop="'.$option.'" /> 
<a class="repeatable-remove button" href="#">-</a></li>';  
$i++;  
}  
} else {  
echo '<li><span class="sort hndle">|||</span>';

// Select ibis o amazon
echo '<select name="'.$field['id'].'" id="'.$field['id'].'">';
foreach ($field['options'] as $option) {
echo '<option', $row == $option['value'] ? ' selected="selected"' : '', ' value="'.$option['value'].'">'.$option['label'].'</option>';
}
echo '</select>';
// Fine select

echo '<input type="text" name="'.$field['id'].'['.$i.']" id="'.$field['id'].'" value="" size="30" /> 
<a class="repeatable-remove button" href="#">-</a></li>';  
}  
echo '</ul> 
<span class="description">'.$field['desc'].'</span>';  
break;

} //end switch  
echo '</td></tr>';  
} // end foreach  
echo '</table>';
}

// Save the Data  
function save_custom_meta($post_id) {  
global $custom_meta_fields;  

// verify nonce  
if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))   
return $post_id;  
// check autosave  
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)  
return $post_id;  
// check permissions  
if ('page' == $_POST['post_type']) {  
if (!current_user_can('edit_page', $post_id))  
return $post_id;  
} elseif (!current_user_can('edit_post', $post_id)) {  
return $post_id;  
}  

// loop through fields and save the data
foreach ($custom_meta_fields as $field) { 

$old = get_post_meta($post_id, $field['id'], true);  
$new = $_POST[$field['id']];  
if ($new && $new != $old) {  
update_post_meta($post_id, $field['id'], $new);  
} elseif ('' == $new && $old) {  
delete_post_meta($post_id, $field['id'], $old);  
}  
} // end foreach 

}  
add_action('save_post', 'save_custom_meta');

The repeatable field generate an array and it is ok, but what I can do to store the select value also?

Hope someone can help me Thanks

theode theode · Accepted Answer · 2014-04-02T00:40:22

I'm sure you can put in dynamic fields into custom Metaboxes inside the edit screen of any post type.

I build this for the Language Field Plugin into the admin page on http://wordpress.org/plugins/language-field/

I was relying on this example http://www.mustbebuilt.co.uk/2012/07/27/adding-form-fields-dynamically-with-jquery/

Generally take these steps

Add custom Meta box with this example http://codex.wordpress.org/Function_Reference/add_meta_box#Examples

when it comes to these lines $mydata = sanitize_text_field( $_POST['myplugin_new_field'] );

// Update the meta field in the database. update_post_meta( $post_id, '_my_meta_value_key', $mydata );

loop thru the fields created with example above.

wordpress metabox merge select + input text

1 Answers