0

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!

0

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.

  • Thank you for explaining that. I'm definitely not a plugin developer, so I'm just doing what I can to get this meta box to work. Looks like that change now allows HTML to save and output. But the problem now is that it does not parse the script that I input. It just outputs the script as plain text. I'm guessing something else needs to be done to tell this metabox to run the script / code / html that is input. – Mark.C Aug 27 '18 at 22:41
  • Show us the code you use to read the meta field from the database, and it's handling up until, and including, where it's output. Sow us the URL too, would be helpful. – De Coder Aug 28 '18 at 6:19
  • I updated the original post with my code and more details. – Mark.C Aug 28 '18 at 17:02
0

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.

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.