The add_meta_box HTML callback is rather low level that we need to code the HTML by ourself, e.g. echo the HTML form markup

function myplugin_meta_box_callback( $post ) {

    // Add an nonce field so we can check for it later.
    wp_nonce_field( 'myplugin_meta_box', 'myplugin_meta_box_nonce' );

    /*
     * Use get_post_meta() to retrieve an existing value
     * from the database and use the value for the form.
     */
    $value = get_post_meta( $post->ID, '_my_meta_value_key', true );

    echo '<label for="myplugin_new_field">';
    _e( 'Description for this field', 'myplugin_textdomain' );
    echo '</label> ';
    echo '<input type="text" id="myplugin_new_field" name="myplugin_new_field" value="' . esc_attr( $value ) . '" size="25" />';
}

Are there any standard HTML markup template for metabox form elements such that we should better follow, instead of randomly craft our HTML form element ourself? i.e. more consistent with the default metabox elements, e.g. line-height, font-size etc

The add_meta_box HTML callback is rather low level that we need to code the HTML by ourself, e.g. echo the HTML form markup

function myplugin_meta_box_callback( $post ) {

    // Add an nonce field so we can check for it later.
    wp_nonce_field( 'myplugin_meta_box', 'myplugin_meta_box_nonce' );

    /*
     * Use get_post_meta() to retrieve an existing value
     * from the database and use the value for the form.
     */
    $value = get_post_meta( $post->ID, '_my_meta_value_key', true );

    echo '<label for="myplugin_new_field">';
    _e( 'Description for this field', 'myplugin_textdomain' );
    echo '</label> ';
    echo '<input type="text" id="myplugin_new_field" name="myplugin_new_field" value="' . esc_attr( $value ) . '" size="25" />';
}

Are there any standard HTML markup template for metabox form elements such that we should better follow, instead of randomly craft our HTML form element ourself? i.e. more consistent with the default metabox elements, e.g. line-height, font-size etc

• metabox
• forms
• html

Share Improve this question edited Nov 5, 2014 at 7:27 Pieter Goosen 55.4k2323 gold badges115115 silver badges210210 bronze badges asked Nov 5, 2014 at 6:48 YogaYoga 91922 gold badges2020 silver badges3939 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

WordPress UI Style Guide site has some reference materials, including those on Box Formats and Forms.

As far as I remember it's not consistently maintained or considered especially canonical source. In practice elements are often done after studying current state of actual admin markup.