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

1 Answer 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.