put saved metabox values back into fields and then display on the front end

Question

i have a group of metaboxes which i finally are now saving but am struggling to get the saved values back into the input boxes they came from. so for example i have a meta field called link text and if i put 'link 1 text' in there and save I save it but it doesn't show back in the form.

the code i use for this is:

function home_callout_meta_box_cb($post) {
    global $post;
    wp_nonce_field('home_callout_nonce', 'home_callout_meta_box_nonce');
    $values = get_post_custom($post->ID);

    for ($i = 1; $i <= 3; $i++) {

        $imagefield1[$i] = isset($values['imagefields'][$i]['image1']) ? esc_attr($values['imagefields'][$i]['image1'][0]): '';
        $imagefield2[$i] = isset($values['imagefields'][$i]['image2']) ? esc_attr($values['imagefields'][$i]['image2'][0]): '';

        $linktext[$i] = isset($values['linktext'][$i]) ? esc_attr($values['linktext'][$i][0]): '';
        $link[$i] = isset($values['link'][$i]) ? esc_attr($values['link'][$i][0]): '';


        echo '<p><strong>Call out box ' . $i .' image 1</strong></p>';
        echo '<div>';
        echo '<input type="text" id="imagefields[' . $i . '][image1]" name="imagefields[' . $i . '][image1]" class="upload-url image_url" readonly="readonly" value="' . $imagefield1[$i] .'" />';
        echo '<input id="st_upload_button" class="st_upload_button button-secondary upload_image" type="button" name="upload_button" value="Upload" />';
        echo '</div>';

        echo '<p><strong>Call out box ' . $i .' image 2</strong></p>';
        echo '<div>';
        echo '<input type="text" id="imagefields[' . $i . '][image2]" name="imagefields[' . $i . '][image2]" class="upload-url image_url" readonly="readonly" value="' . $imagefield2[$i] .'" />';
        echo '<input id="st_upload_button" class="st_upload_button button-secondary upload_image" type="button" name="upload_button" value="Upload" />';
        echo '</div>';

        echo '<p><strong>Call out box ' . $i .' link text</strong></p>';
        echo '<input type="text" id="linktext[' . $i . ']" name="linktext[' . $i . ']" value="' . $linktext[$i] . '" />';

        echo '<p><strong>Call out box ' . $i .' link</strong></p>';
        echo '<input type="text" id="link[' . $i . ']" name="link[' . $i . ']" value="' . $link[$i] . '" />';
        // var_dump($values['imagefields'][0]);
    }
}

function home_callout_save($post_id) {
    if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if(!isset($_POST['home_callout_meta_box_nonce']) || !wp_verify_nonce($_POST['home_callout_meta_box_nonce'], 'home_callout_nonce')) return;
    if(!current_user_can('edit_pages')) return;

    if(isset($_POST['imagefields'])) {
        update_post_meta($post_id, 'imagefields', $_POST['imagefields']);   
    }

    if(isset($_POST['linktext'])) {
        update_post_meta($post_id, 'linktext', $_POST['linktext']);
    }
    if(isset($_POST['link'])) {
        update_post_meta($post_id, 'link', $_POST['link']);
    }
}
add_action('save_post', 'home_callout_save');

I know the fields save because if i do a var_dump($values['linktext']);

this is the array that is returned:

array(1) { [0]=> string(75) "a:3:{i:1;s:11:"link text 1";i:2;s:11:"Link 2 text";i:3;s:11:"Link 3 text";}" } 

i am unsure how to get the saved values back into each field.

the other small question i have is to retreieve the values of each meta box on the front end would i use:

get_post_meta($post_id, 'linktext'][1]', true);

thanks in advance for any help.

Answer 1

You want to get the data out of the custom post type, assign it to a variable, then echo that value into the field when the page loads. If nothing else, that will make your code a lot more readable (and easier to troubleshoot) While it's not explicitly about what you are doing, you an see the exact method at work here (WP Stackexchange Post).

You may also find Justin Tadlock's review of meta boxes at Smashing Magazine to be an enlightening read.

Finally, if you want shortcuts, a system like WordPress Alchemy provides a good code library for rapid prototyping and execution, whereas something like Advanced Custom Fields takes a more GUI approach.

Answer 2

So i finally have got the values appearing in the fields. I am not sure if im doing it in a nice way. but would happily appreciate some comments on how to do it better.

here is my code:

function home_callout_meta_box_cb($object, $post) {
    global $post;
    wp_nonce_field('home_callout_nonce', 'home_callout_meta_box_nonce');
    $values = get_post_custom($post->ID);

    for ($i = 1; $i <= 3; $i++) {

        $imagefield1[$i] = isset($values['imagefields'][$i]['image1']) ? esc_attr($values['imagefields'][$i]['image1'][0]): '';
        $imagefield2[$i] = isset($values['imagefields'][$i]['image2']) ? esc_attr($values['imagefields'][$i]['image2'][0]): '';

        $linktext[$i] = isset($values['linktext'][$i]) ? esc_attr($values['linktext'][$i][0]): '';
        $link[$i] = isset($values['link'][$i]) ? esc_attr($values['link'][$i][0]): '';

        $linkText = get_post_meta( $object->ID, 'linktext', true );
        $linkUrl = get_post_meta( $object->ID, 'link', true );
        $image = get_post_meta( $object->ID, 'imagefields', true );



        echo '<p><strong>Call out box ' . $i .' image 1</strong></p>';
        echo '<div>';
        echo '<input type="text" id="imagefields[' . $i . '][image1]" name="imagefields[' . $i . '][image1]" class="upload-url image_url" readonly="readonly" value="' . $image[$i]['image1'] .'" />';
        echo '<input id="st_upload_button" class="st_upload_button button-secondary upload_image" type="button" name="upload_button" value="Upload" />';
        echo '</div>';

        echo '<p><strong>Call out box ' . $i .' image 2</strong></p>';
        echo '<div>';
        echo '<input type="text" id="imagefields[' . $i . '][image2]" name="imagefields[' . $i . '][image2]" class="upload-url image_url" readonly="readonly" value="' . $image[$i]['image2'] .'" />';
        echo '<input id="st_upload_button" class="st_upload_button button-secondary upload_image" type="button" name="upload_button" value="Upload" />';
        echo '</div>';

        echo '<p><strong>Call out box ' . $i .' link text</strong></p>';
        echo '<input type="text" id="linktext[' . $i . ']" name="linktext[' . $i . ']" value="' . $linkText[$i] . '" />';

        echo '<p><strong>Call out box ' . $i .' link</strong></p>';
        echo '<input type="text" id="link[' . $i . ']" name="link[' . $i . ']" value="' . $linkUrl[$i] . '" />';

    }
}

what i did was i created some variables to retreive the meta data and it returned an array so i can use $i to get the correct one and echo that value in the field.

i feel that is a messy way so would appreciate some comments on how to do it better if there is a way?