WordPress – Dynamically adding new fields in the administration

4 Views

Im wondering if someone can help me out … At the moment i have the following code which adds and saves data from a custom meta box in the wordpress admin.

What i want to be able to do, is add a little href that says something like “add more info”, which will then render another round of the fields, so i will be able to add as many as i need.

Read More

I hope someone can help.

The code i have to render and save just 1 round of fields is as follows: 

$new_copy_prefix = 'new_copy_';
$new_copy_meta_box = array(
'id' => 'new_copy_meta_box',
'title' => 'Content',
'page' => 'post',
'context' => 'normal',
'priority' => 'high',
'fields' => array(
    array(
        'name' => 'Title:',
        'desc' => '',
        'id' => $new_copy_prefix . 'title',
        'type' => 'text',
        'std' => ''
    ),
    array(
        'name' => 'Content:',
        'desc' => '',
        'id' => $new_copy_prefix . 'content',
        'type' => 'textarea',
        'std' => ''
    ),
)
);

function new_copy_meta_box() {
global $new_copy_meta_box;

add_meta_box($new_copy_meta_box['id'], $new_copy_meta_box['title'], 'display_new_copy_html', $new_copy_meta_box['page'], $new_copy_meta_box['context'], $new_copy_meta_box['priority'] );
}
add_action( 'admin_menu', 'new_copy_meta_box' );

function display_new_copy_html() {
global $new_copy_meta_box, $post;

// Use nonce for verification to check that the person has adequate priveleges
echo '<input type="hidden" name="new_copy_meta_box_nonce" value="', wp_create_nonce(basename(__FILE__)), '" />';        

// Create the code to display teh HTML
echo '<table class="form-table">';

foreach($new_copy_meta_box['fields'] as $field) {
    $meta = get_post_meta($post->ID, $field['id'], true);

    echo '<tr>';
    echo '  <th style="width:35%"><label for="', $field['id'], '">', $field['name'], '</label></th>';
    echo '  <td>';

    switch ($field['type']) {
        case 'text': // The html to display for the text type
            echo '<input type="text" name="', $field['id'], '" id="', $field['id'], '" value="', $meta ? $meta : $field['std'], '" size="30" style="width:97%" />', '<br />', $field['desc'];
            break;

        case 'textarea': // The html to display for the textarea type
            echo '<textarea name="', $field['id'], '" id="', $field['id'], '" cols="60" rows="4" style="width:97%">', $meta ? $meta : $field['std'], '</textarea>', '<br />', $field['desc'];
            break;
    }

    echo '  </td>';
    echo '</tr>';
}

echo '</table>';
}

function new_copy_meta_box_save_data($post_id) {
global $new_copy_meta_box;

// Verify nonce -- Checks that the user has access
if (!wp_verify_nonce($_POST['new_copy_meta_box_nonce'], basename(__FILE__))) {
    return $post_id;
}

// Check autosave
if (defined('DOING AUTOSAVE') && DOING_AUTOSAVE) {
    return $post_id;
}

// check permissions
if ('post' == $_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;
}

foreach ($new_copy_meta_box['fields'] as $field) { // Save each option
    $old = get_post_meta($post_id, $field['id'], true);
    $new = $_POST[$field['id']];

    if($new && $new != $old) { // Compare changes to existing data
        update_post_meta($post_id, $field['id'], $new);
    } elseif ('' == $new && $old) {
        delete_post_meta($post_id, $field['id'], $old);
    }
}
}
add_action('save_post', 'new_copy_meta_box_save_data' ); // Save the data
Post Views: 4

Related posts

Leave a Reply

2 comments

  1. you mean something like this ?

    EDIT I (After comment )

    copy and pasted from the my own answer at the above link :

      add_action( 'add_meta_boxes', 'dynamic_add_custom_box' );

    /* Do something with the data entered */
    add_action( 'save_post', 'dynamic_save_postdata' );

    /* Adds a box to the main column on the Post and Page edit screens */
    function dynamic_add_custom_box() {
        add_meta_box(
            'dynamic_sectionid',
            __( 'My Slogans', 'myplugin_textdomain' ),
            'dynamic_inner_custom_box',
            'post');
    }

    /* Render the box content */
    function dynamic_inner_custom_box() {
        global $post;
        // nonce for verification
        wp_nonce_field( plugin_basename( __FILE__ ), 'dynamicMeta_noncename' );
        ?>
        <div id="meta_inner">
        <?php

        //GEt the array of saved meta
        $slogans = get_post_meta($post->ID,'slogans',true);

        $c = 0;
        //if ( count( $slogans ) > 0 ) {
        if( is_array ( $slogans ) ){
            foreach( $slogans as $slogan ) {
                if ( isset( $slogan['name'] ) || isset( $slogan['slogan'] ) ) {
                    printf( '<p>Slogan Name <input type="text" name="slogans[%1$s][name]" value="%2$s" /> -- Slogan Content : <input type="text" name="slogans[%1$s][slogan]" value="%3$s" /><input class="button tagadd remove" type="button" value="%4$s"></p>', $c, $slogan['name'], $slogan['slogan'], __( 'Remove Slogan' ) );
                    $c = $c +1;
                }
            }
        }

        ?>
    <span id="here"></span>
    <input class="button tagadd add" type="button" value="<?php _e('Add Slogan'); ?>">
    <script>
        var $ =jQuery.noConflict();
        $(document).ready(function() {
            var count = <?php echo $c; ?>;
            $(".add").click(function() {
                count = count + 1;

                $('#here').append('<p> Slogan Name <input type="text" name="slogans['+count+'][name]" value="" /> -- Slogan Content : <input type="text" name="slogans['+count+'][slogan]" value="" /><input class="button tagadd remove" type="button" value="<?php _e('Remove Slogan'); ?>">' );
                return false;
            });
            $(".remove").live('click', function() {
                $(this).parent().remove();
            });
        });
        </script>
    </div><?php

    }

    /*  saves our custom data when the post is saved */
    function dynamic_save_postdata( $post_id ) {
        // verify if this is an auto save routine. 
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
            return;

        // verify Nonce and that the request is valid,
        if ( !isset( $_POST['dynamicMeta_noncename'] ) )
            return;

        if ( !wp_verify_nonce( $_POST['dynamicMeta_noncename'], plugin_basename( __FILE__ ) ) )
            return;

        // GOOD; we are set, find a save data

        $slogans = $_POST['slogans'];

        update_post_meta($post_id,' slogans',$slogans);
}