Understanding and using metaboxes in posts

Question

I am developing my first theme that is not dependent on a parent theme but I am running into some back-end problems. I'm trying to add a metabox to all posts that are being written. This question is quite broad in that it covers quite a lot of features. So if that's preferred I will chop it down into pieces, across multiple posts on this site. For the time being, I'll post them as one.

As said I am trying to add some fields where authors can optionally fill in additional information, for example a source where they found most of their information and the home page of a press contact. Based on this great answer on a previous question, I set out to copy-edit that code and I ended up with the following.

function add_source_metabox(){
    add_meta_box(
        'source_post_metabox', 'Bron', 'output_source_metabox', 'post'
    );
}
add_action('add_meta_boxes', 'add_source_metabox');

function output_source_metabox($post){
    wp_nonce_field('source_post_metabox', 'source_post_metabox_nonce');

    echo '<label for="source_post">';
    echo '<input type="text" id="source_post" name="source_post" value="" style="width: 80%;max-width: 720px;">';
    echo ' Voer hier de bron van je bericht in.</label>';
    echo '<p>Bv. <em>http://tweakers.net/nieuws/101372/ing-belgie-wil-betalingsgedrag-van-klanten-meer-gebruiken-voor-dienstverlening.html</em></p>';

}
function save_source_metabox($post_id){
    /*
     * We need to verify this came from our screen and with proper authorization,
     * because the save_post action can be triggered at other times.
     */

    /** Ensure that a nonce is set */
    if(!isset($_POST['source_post_metabox_nonce'])) :
        return;
    endif;

    /** Ensure that the nonce is valid */
    if(!wp_verify_nonce( $_POST['source_post_metabox_nonce'], 'source_post_metabox')) :
        return;
    endif;

    /** Ensure that an AUTOSAVE is not taking place */
    if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) :
        return;
    endif;

    /** Ensure that the user has permission to update this option */
    if(!current_user_can('edit_post', $post_id)) :
        return;
    endif;

    // Update and save the field so it can be used in our template

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

Which looks like this:

The problem is, though, that upon entering data into the new input field and then saving the post, the field is empty. I was't really surprised because I don't think I saved that data yet - that part is missing from save_source_metabox. So what I still need is: 1. saving the input and knowing how to 2. access that data from my template, and 3. showing that data in the input field after saving so that the user knows that something's already filled in.

Additionally, I want to add an extra field (as said) to the same wrapper. I.e. also under the heading "Bron". This field should behave similar to the one above: can be filled in optionally by an author, and when it's filled in I should be able to echo its contents in the template. I am guessing I can add another metabox in the add_source_metabox, but I would need another callback and save function?

Answer 1

To save:

// Update and save the field so it can be used in our template
if ( isset( $_POST['input_name'] ) ) {
    $data = sanitize_text_field( $_POST['input_name'] );
    update_post_meta( $post_id, 'field_name', $data );
}

To read:

$data = get_post_meta( $post_id, 'field_name', true );
// With post object, a leaner, cleaner method:
$data = $post->field_name;

There's no need to register another metabox & write another callback. Just duplicate the first batch of echo in output_source_metabox() and change the label & name.

To fill the value with the saved data:

echo '<input ... value="' . esc_attr( get_post_meta( $post_id, 'field_name', true ) ) . '" ... />';

You'll need another "save" block for this second field - just make sure to swap input_name for the name of the input, and field_name for the meta key you want to store this data as.