Scripts and tags will not save or output from my custom meta box

Question

I am copying this tutorial to make my own custom meta box https://www.sitepoint.com/adding-meta-boxes-post-types-wordpress/

It works perfectly, however I need to be able to enter script tags into this meta box and save the script and output it on the page.

When I enter anything like script tags or div tags, it will clear the meta box field and not save or output what I entered, after updating the page.

I noticed the code has this:

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

But even after I remove that line, it will still not save or output my script in the meta box.

Is there something else I need to do to make this work with scripts and tags? Is there a reason why this isn't working?

Thank you.

*EDIT

Here is the full code I'm using in a plugin to create the metabox and a shortcode to output the metabox content.

<?php
   /*
   Plugin Name: VBO Tickets Plugin Embed
   Plugin URI: https://www.vbotickets.com
   Description: Add your plugin code to any page or post on your WordPress site.
   Version: 0.1
   Author: VBO Tickets
   */

function global_notice_meta_box() {

    $screens = get_post_types();

    foreach ( $screens as $screen ) {
        add_meta_box(
            'global-notice',
            __( 'VBO Plugin Embed', 'vbotickets' ),
            'global_notice_meta_box_callback',
            $screen
        );
    }
}

add_action( 'add_meta_boxes', 'global_notice_meta_box' );

function global_notice_meta_box_callback( $post ) {

    // Add a nonce field so we can check for it later.
    wp_nonce_field( 'global_notice_nonce', 'global_notice_nonce' );

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

    echo '<p><strong>Paste your VBO plugin embed code in the text area below:</strong></p>';

    echo '<textarea style="width:100%;min-height:150px;" id="global_notice" name="global_notice">' . esc_attr( $value ) . '</textarea>';

    echo '<p><strong>Next, copy/paste</strong> <code>[vbo-plugin-embed]</code> <strong>into the content area where you want the plugin to load on this page.</strong></p>';
}

/**
 * When the post is saved, saves our custom data.
 *
 * @param int $post_id
 */
function save_global_notice_meta_box_data( $post_id ) {

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

    // Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $_POST['global_notice_nonce'], 'global_notice_nonce' ) ) {
        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['global_notice'] ) ) {
        return;
    }

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

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

add_action( 'save_post', 'save_global_notice_meta_box_data' );

// Add shortcode [vbo-plugin-embed]
function vbo_embed_sc( $atts ){

    global $post;

    // retrieve the global notice for the current post
    $global_notice = esc_attr( get_post_meta( $post->ID, '_global_notice', true ) );

    return $global_notice;
}
add_shortcode( 'vbo-plugin-embed', 'vbo_embed_sc' );

Here is the URL I am testing this on https://demo.vbotickets.com/photos/

The problem now is that I have gotten scrtips/HTML to save in the metabox, but the output is plain text rather than actually running the code/script. Is there a way to run it as well?

Thanks!

Answer 1

Your using "esc_attr()" to escape the data, That is why it's being converted to plan text. If you used echo it will likely work. However, your saving the script tags into the database.

I'm still on the learning journey just like you but here is what I would do.

TO SAVE THE DATA

//$my_data = sanitize_text_field( $_POST['global_notice'] );
//$my_data = $_POST['global_notice'];
$my_data = htmlspecialchars($_POST['global_notice']);

Then to output the data

if(!empty($global_notice)) {
    $myvar = htmlspecialchars_decode($global_notice);
    return $myvar;
}

If "return" does not work you could use "echo".

Hope this helps.

Also, when creating shortcode you may want to learn about ob_start(); and return_ob_clean(); if your shortcode is being displayed on the front end in the incorrect position. You can always use the same code is a template file fyi.

Answer 2

You cannot just remove the line to skip sanitizing of your data. The line is: $my_data = sanitize_text_field( $_POST['global_notice'] ); If you remove it, you have nothing sent to $my_data

For testing, try replacing it with just: $my_data = $_POST['global_notice'];

I suggest for a live environment, you DO sanitize it somehow though.