Allow HTML in Custom Metabox area

admin管理员组

文章数量:1122832

I know there are many questions related to my question, but sincerely i was unable to get solution. My question is simple, how can i allow html in textarea in custom metabox on post. So far i have created this code of adding meta boxes.

add_action( 'add_meta_boxes_post', function ( $post ) {
    if ( $post->_wp_page_template === 'page-templates/skyscraper-post.php' ) {
        add_meta_box( 'sky_post_excerpt', 'SkyScraper Post Excerpt and Links', 'sky_post_excerpts', 'post', 'advanced', 'high' );
    }
});
add_action( 'save_post', 'post_meta_box_save' );
function sky_post_excerpts() {
    global $post;
    $values = get_post_custom( $post->ID );

    $strong_title = isset( $values['skyscraper_strong'] ) ? esc_attr( $values['skyscraper_strong'][0] ) : "";
    $title = isset( $values['skyscraper_post_title'] ) ? esc_attr( $values['skyscraper_post_title'][0] ) : "";
    $text = isset( $values['skyscraper_post'] ) ? esc_attr( $values['skyscraper_post'][0] ) : "";
    $image = isset( $values['skyscraper_post_image'] ) ? esc_attr( $values['skyscraper_post_image'][0] ) : "";

// We'll use this nonce field later on when saving.
    wp_nonce_field( 'my_post_meta_box_nonce', 'post_meta_box_nonce' );
    ?>

    <table class="form-table">
    <tbody>
        <tr valign="top">
        <th scope="row">
            <label><strong>Skyscraper Title</strong></label>
        </th>
        <td>
            <p><input class="widefat" rows="4" name="skyscraper_strong" id="skyscraper_strong" value="<?php echo $strong_title; ?>"/>
            </p>
            <p><input class="widefat" rows="4" name="skyscraper_post_title" id="skyscraper_post_title" value="<?php echo $title; ?>"/>
            </p>
        </td>
    </tr>

    <tr valign="top">
        <th scope="row">
            <label for="skyscraper_post"><strong>Skyscraper Page Excerpt</strong></label>
        </th>
        <td>
            <p><textarea class="widefat" rows="4" name="skyscraper_post" id="skyscraper_post"> <?php echo $text; ?></textarea>
            </p>
        </td>
    </tr>
    <tr valign="top">
        <th scope="row">
            <label for="skyscraper_image"><strong>SVG Image Link</strong></label>
        </th>
        <td>
            <p><input class="widefat" rows="4" name="skyscraper_post_image" id="skyscraper_post_image" value="<?php echo $image; ?>"/>
            </p>
        </td>
    </tr>

    </tbody>
</table>
    <?php
}


function post_meta_box_save( $post_id ) {
    // Bail if we're doing an auto save
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

    // if our nonce isn't there, or we can't verify it, bail
    if( !isset( $_POST['post_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['post_meta_box_nonce'], 'my_post_meta_box_nonce' ) ) return;

    // if our current user can't edit this post, bail
    if( !current_user_can( 'edit_post' ) ) return;

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post'] ) )
        update_post_meta( $post_id, 'skyscraper_post', wp_kses( $_POST['skyscraper_post'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post_image'] ) )
        update_post_meta( $post_id, 'skyscraper_post_image', wp_kses( $_POST['skyscraper_post_image'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_strong'] ) )
        update_post_meta( $post_id, 'skyscraper_strong', wp_kses( $_POST['skyscraper_strong'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post_title'] ) )
        update_post_meta( $post_id, 'skyscraper_post_title', wp_kses( $_POST['skyscraper_post_title'], $allowed ) );
}

How can i make this possible to output html. because I don't see any solution on Google. Thanks in advance

I know there are many questions related to my question, but sincerely i was unable to get solution. My question is simple, how can i allow html in textarea in custom metabox on post. So far i have created this code of adding meta boxes.

add_action( 'add_meta_boxes_post', function ( $post ) {
    if ( $post->_wp_page_template === 'page-templates/skyscraper-post.php' ) {
        add_meta_box( 'sky_post_excerpt', 'SkyScraper Post Excerpt and Links', 'sky_post_excerpts', 'post', 'advanced', 'high' );
    }
});
add_action( 'save_post', 'post_meta_box_save' );
function sky_post_excerpts() {
    global $post;
    $values = get_post_custom( $post->ID );

    $strong_title = isset( $values['skyscraper_strong'] ) ? esc_attr( $values['skyscraper_strong'][0] ) : "";
    $title = isset( $values['skyscraper_post_title'] ) ? esc_attr( $values['skyscraper_post_title'][0] ) : "";
    $text = isset( $values['skyscraper_post'] ) ? esc_attr( $values['skyscraper_post'][0] ) : "";
    $image = isset( $values['skyscraper_post_image'] ) ? esc_attr( $values['skyscraper_post_image'][0] ) : "";

// We'll use this nonce field later on when saving.
    wp_nonce_field( 'my_post_meta_box_nonce', 'post_meta_box_nonce' );
    ?>

    <table class="form-table">
    <tbody>
        <tr valign="top">
        <th scope="row">
            <label><strong>Skyscraper Title</strong></label>
        </th>
        <td>
            <p><input class="widefat" rows="4" name="skyscraper_strong" id="skyscraper_strong" value="<?php echo $strong_title; ?>"/>
            </p>
            <p><input class="widefat" rows="4" name="skyscraper_post_title" id="skyscraper_post_title" value="<?php echo $title; ?>"/>
            </p>
        </td>
    </tr>

    <tr valign="top">
        <th scope="row">
            <label for="skyscraper_post"><strong>Skyscraper Page Excerpt</strong></label>
        </th>
        <td>
            <p><textarea class="widefat" rows="4" name="skyscraper_post" id="skyscraper_post"> <?php echo $text; ?></textarea>
            </p>
        </td>
    </tr>
    <tr valign="top">
        <th scope="row">
            <label for="skyscraper_image"><strong>SVG Image Link</strong></label>
        </th>
        <td>
            <p><input class="widefat" rows="4" name="skyscraper_post_image" id="skyscraper_post_image" value="<?php echo $image; ?>"/>
            </p>
        </td>
    </tr>

    </tbody>
</table>
    <?php
}


function post_meta_box_save( $post_id ) {
    // Bail if we're doing an auto save
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

    // if our nonce isn't there, or we can't verify it, bail
    if( !isset( $_POST['post_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['post_meta_box_nonce'], 'my_post_meta_box_nonce' ) ) return;

    // if our current user can't edit this post, bail
    if( !current_user_can( 'edit_post' ) ) return;

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post'] ) )
        update_post_meta( $post_id, 'skyscraper_post', wp_kses( $_POST['skyscraper_post'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post_image'] ) )
        update_post_meta( $post_id, 'skyscraper_post_image', wp_kses( $_POST['skyscraper_post_image'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_strong'] ) )
        update_post_meta( $post_id, 'skyscraper_strong', wp_kses( $_POST['skyscraper_strong'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post_title'] ) )
        update_post_meta( $post_id, 'skyscraper_post_title', wp_kses( $_POST['skyscraper_post_title'], $allowed ) );
}

How can i make this possible to output html. because I don't see any solution on Google. Thanks in advance

• custom-field
• metabox
• post-meta

Share Improve this question asked Apr 1, 2019 at 12:26 Raashid DinRaashid Din 21822 silver badges1919 bronze badges 13

• If you're trying to output HTML, use esc_html() instead of esc_attr(). When you're saving values you're not defining $allowed before passing it to wp_kses(). If you don't have a particular list of tags you want to allow then use wp_kses_allowed_html() to define that variable. – mrben522 Commented Apr 1, 2019 at 12:42
• didn't understand. will you please edit my code. any help will be appreciated – Raashid Din Commented Apr 1, 2019 at 12:44
• what input fields are you trying to have the html entered in? – mrben522 Commented Apr 1, 2019 at 12:49
• skyscraper_strong input – Raashid Din Commented Apr 1, 2019 at 13:17
• still not working. it escapes all the html. – Raashid Din Commented Apr 1, 2019 at 13:39

 |  Show 8 more comments

1 Answer 1

Sorted by: Reset to default 0

I fixed your input type/sanitization and escaping issues. I think there's still some cleanup that could be done with this code though. I see inputs without labels, invalid attributes, etc.

add_action( 'add_meta_boxes_post', function ( $post ) {
    if ( $post->_wp_page_template === 'page-templates/skyscraper-post.php' ) {
        add_meta_box( 'sky_post_excerpt', 'SkyScraper Post Excerpt and Links', 'sky_post_excerpts', 'post', 'advanced', 'high' );
    }
});
add_action( 'save_post', 'post_meta_box_save' );
function sky_post_excerpts() {
    global $post;
    $values = get_post_custom( $post->ID );

    $strong_title = isset( $values['skyscraper_strong'] ) ? stripslashes(wp_filter_post_kses(addslashes( $values['skyscraper_strong'][0] ) ) ) : "";
    $title = isset( $values['skyscraper_post_title'] ) ? esc_attr( $values['skyscraper_post_title'][0] ) : "";
    $text = isset( $values['skyscraper_post'] ) ? esc_attr( $values['skyscraper_post'][0] ) : "";
    $image = isset( $values['skyscraper_post_image'] ) ? esc_attr( $values['skyscraper_post_image'][0] ) : "";

    // We'll use this nonce field later on when saving.
    wp_nonce_field( 'my_post_meta_box_nonce', 'post_meta_box_nonce' );
    ?>

    <table class="form-table">
        <tbody>
        <tr valign="top">
            <th scope="row">
                <label><strong>Skyscraper Title</strong></label>
            </th>
            <td>
                <p><textarea class="widefat" rows="4" name="skyscraper_strong" id="skyscraper_strong" ><?php echo $strong_title; ?></textarea>
                </p>
                <p><input class="widefat" rows="4" name="skyscraper_post_title" id="skyscraper_post_title" value="<?php echo $title; ?>"/>
                </p>
            </td>
        </tr>

        <tr valign="top">
            <th scope="row">
                <label for="skyscraper_post"><strong>Skyscraper Page Excerpt</strong></label>
            </th>
            <td>
                <p><textarea class="widefat" rows="4" name="skyscraper_post" id="skyscraper_post"> <?php echo $text; ?></textarea>
                </p>
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">
                <label for="skyscraper_image"><strong>SVG Image Link</strong></label>
            </th>
            <td>
                <p><input class="widefat" rows="4" name="skyscraper_post_image" id="skyscraper_post_image" value="<?php echo $image; ?>"/>
                </p>
            </td>
        </tr>

        </tbody>
    </table>
    <?php
}


function post_meta_box_save( $post_id ) {
    // Bail if we're doing an auto save
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

    // if our nonce isn't there, or we can't verify it, bail
    if( !isset( $_POST['post_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['post_meta_box_nonce'], 'my_post_meta_box_nonce' ) ) return;

    // if our current user can't edit this post, bail
    if( !current_user_can( 'edit_post' ) ) return;
    $allowed = wp_kses_allowed_html();

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post'] ) )
        update_post_meta( $post_id, 'skyscraper_post', wp_kses( $_POST['skyscraper_post'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post_image'] ) )
        update_post_meta( $post_id, 'skyscraper_post_image', wp_kses( $_POST['skyscraper_post_image'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_strong'] ) )
        update_post_meta( $post_id, 'skyscraper_strong', wp_kses( $_POST['skyscraper_strong'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post_title'] ) )
        update_post_meta( $post_id, 'skyscraper_post_title', wp_kses( $_POST['skyscraper_post_title'], $allowed ) );
}

本文标签： Allow HTML in Custom Metabox area