WordPress add meta box allow HTML

Question

I have set up a Meta box which all works fine, however I want to accept HTML, or the just the class really. I have tried to code in this to work however it doesn't and I'm not sure why this is.

My code is:

/**
* Adds a box to the main column on the Page edit screens.
*/

function myplugin_add_meta_box() {

$screens = array( 'page' );

foreach ( $screens as $screen ) {

    add_meta_box(
        'myplugin_sectionid',
        __( 'Page Intro Text in Header', 'myplugin_textdomain' ),
        'myplugin_meta_box_callback',
        $screen
    );
}
}
add_action( 'add_meta_boxes', 'myplugin_add_meta_box' );

/**
* Prints the box content.
* 
* @param WP_Post $post The object for the current post/page.
*/
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, 'pageintro', true );
echo '<input type="text" id="myplugin_new_field" name="myplugin_new_field" value="' . esc_html( $value ) . '" style="width: 100%;" />';
}

/**
* When the post is saved, saves our custom data.
*
* @param int $post_id The ID of the post being saved.
*/
function myplugin_save_meta_box_data( $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.
 */

// Check if our nonce is set.
if ( ! isset( $_POST['myplugin_meta_box_nonce'] ) ) {
    return;
}

// Verify that the nonce is valid.
if ( ! wp_verify_nonce( $_POST['myplugin_meta_box_nonce'], 'myplugin_meta_box' ) ) {
    return;
}

// If this is an autosave, our form has not been submitted, so we don't want to do anything.
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
    return;
}

// Check the user's permissions.
if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) {

    if ( ! current_user_can( 'edit_page', $post_id ) ) {
        return;
    }

} else {

    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return;
    }
}

/* OK, it's safe for us to save the data now. */

// Make sure that it is set.
if ( ! isset( $_POST['myplugin_new_field'] ) ) {
            return;
    }
    // WP's default allowed tags
    global $allowedtags;

    // allow iframe only in this instance
    $span = array( '<span>' => array(
                        '<span>' => array ()
                         ) );

    $allowed_html = array_merge( $allowedtags, $span );

// Sanitize user input.
$my_data = sanitize_text_field( $_POST['myplugin_new_field'], $allowed_html );

// Update the meta field in the database.
update_post_meta( $post_id, 'pageintro', $my_data );
}

// save the text input
if ( isset( $_POST['myplugin_new_field'] ) ) {
    // Sanitize user input.
    $my_data = sanitize_text_field( $_POST['myplugin_new_field'] );
    // Update the meta field in the database.
    update_post_meta( $post_id, 'pageintro', $my_data );
}

add_action( 'save_post', 'myplugin_save_meta_box_data' );

What do I need to change to get this work?

Thank you.

Answer 1

use reach text area for html it is very helpfull and also avilable in by default in wordpress folow this code

$value = get_post_meta( $post->ID, 'pageintro', true );

  wp_editor( $meta, $field['id'], $settings);

    $this->show_field_end( $field, $meta );