Allow iframe in custom meta box

Question

I've created a custom meta box called 'Location Map' and want to provide a functionality to the client to simply copy paste the location's google map's iframe embed code so that it directly appears on the front-end. The value just doesn't store. Below is the code to save the meta box.

/* Save the meta box's post metadata. */
function kk_save_location_map( $post_id, $post ) {

    /* Verify the nonce before proceeding. */
    if ( !isset( $_POST['location_map_nonce'] ) || !wp_verify_nonce( $_POST['location_map_nonce'], basename( __FILE__ ) ) )
        return $post_id;

    /* Get the post type object. */
    $post_type = get_post_type_object( $post->post_type );

    /* Check if the current user has permission to edit the post. */
    if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
        return $post_id;

    /* Get the posted data and sanitize it for use as an HTML class. */
    $new_meta_value = ( isset( $_POST['location-map'] ) ? ( $_POST['location-map'] ) : '' );

    /* Get the meta key. */
    $meta_key = 'location-map';

    /* Get the meta value of the custom field key. */
    $meta_value = esc_textarea(get_post_meta( $post_id, $meta_key, true ));

    /* If a new meta value was added and there was no previous value, add it. */
    if ( $new_meta_value && '' == $meta_value )
        add_post_meta( $post_id, $meta_key, $new_meta_value, true );

    /* If the new meta value does not match the old value, update it. */
    elseif ( $new_meta_value && $new_meta_value != $meta_value )
        update_post_meta( $post_id, $meta_key, $new_meta_value );

    /* If there is no new meta value but an old value exists, delete it. */
    elseif ( '' == $new_meta_value && $meta_value )
        delete_post_meta( $post_id, $meta_key, $meta_value );
}

I've tried with esc_html, esc_attr, esc_textarea, wp_kses and what not without success.

Answer 1

I tried your code and it works:

I changed the wp_verify_nonce function, because that wasn't working for me. I added an action instead of what it had. Now, for this to work, you have to create a nonce field with a code like this, of course that you can change the names if you want.

//this goes in the function that generates the metabox    
wp_nonce_field( 'location_map_nonce_action', 'location_map_nonce' );

And this is the finall code of the function that save the values.

function kk_save_location_map( $post_id, $post ) {



    /* Verify the nonce before proceeding. */
    if ( !isset( $_POST['location_map_nonce'] ) || !wp_verify_nonce( $_POST['location_map_nonce'], 'location_map_nonce_action' ) ){
            return $post_id;
     }

    /* Get the post type object. */
    $post_type = get_post_type_object( $post->post_type );

    /* Check if the current user has permission to edit the post. */
    if ( !current_user_can( $post_type->cap->edit_post, $post_id ) ){

        return $post_id;
    }

    /* Get the posted data and sanitize it for use as an HTML class. */
    $new_meta_value = ( isset( $_POST['location-map'] ) ? ( $_POST['location-map'] ) : '' );

    /* Get the meta key. */
    $meta_key = 'location-map';

    /* Get the meta value of the custom field key. */
    $meta_value = esc_textarea(get_post_meta( $post_id, $meta_key, true ));

    /* If a new meta value was added and there was no previous value, add it. */
    if ( $new_meta_value && '' == $meta_value ){

        add_post_meta( $post_id, $meta_key, $new_meta_value, true );
    }
    /* If the new meta value does not match the old value, update it. */
    elseif ( $new_meta_value && $new_meta_value != $meta_value ){

        update_post_meta( $post_id, $meta_key, $new_meta_value );
    }
    /* If there is no new meta value but an old value exists, delete it. */
    elseif ( '' == $new_meta_value && $meta_value ){

        delete_post_meta( $post_id, $meta_key, $meta_value );
    }   

}

add_action( 'save_post', 'kk_save_location_map', 10, 2 );

Answer 2

If the problem is the iframe tag, you could make a filter and just have them leave out the iframe tag.

<?php 

function my_custom_filter ( $filter_output ) {
    $meta_value = get_post_meta( get_the_ID(), 'location-map', true);
    $filter_output = str_replace( '{{ location-map }}', '<iframe ' . $meta_value['location-map'] . '></iframe>', $filter_output );

    return $filter_output;
}

Answer 3

So, after messing around with my entire functions.php, I figured out where the actual problem was. The function for displaying the meta box was incorrect

BEFORE

function kk_custom_meta_box2( $object, $box ) { ?>

<?php wp_nonce_field( 'location_map_nonce_action', 'location_map_nonce' ); ?>

<p>
    <label for="location-map"><?php _e( "Enter the location's map using Google map's embed function<br>", 'ac' ); ?></label>
    <textarea class="widefat" type="text" name="location-map" id="location-map">
        <?php echo esc_html(get_post_meta( $object->ID, 'location-map', true )); ?>
    </textarea>
</p>
<?php }

AFTER

function kk_custom_meta_box2( $object, $box ) { ?>

<?php wp_nonce_field( 'location_map_nonce_action', 'location_map_nonce' ); ?>

<p>
    <label for="location-map"><?php _e( "Enter the location's map using Google map's embed function<br>", 'ac' ); ?></label>
    <textarea class="widefat" type="text" name="location-map" id="location-map">
        <?php echo get_post_meta( $object->ID, 'location-map', true ); ?>
    </textarea>
</p>
<?php }

I simply had to remove esc_html from its value so that the update function doesn't mess with it.