0

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

  • 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 Apr 1 at 12:42
  • didn't understand. will you please edit my code. any help will be appreciated – Raashid Din Apr 1 at 12:44
  • what input fields are you trying to have the html entered in? – mrben522 Apr 1 at 12:49
  • skyscraper_strong input – Raashid Din Apr 1 at 13:17
  • still not working. it escapes all the html. – Raashid Din Apr 1 at 13:39
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 ) );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.