0

I have a created a custom meta box plugin and a function in the functions.php file to output the value on the page.

The meta box seems to be working, however the input text is not being displayed on left side of the image, also when I inspect the element in the browser, the h3 tag is empty.

enter image description here This is the functions.php file:

// Custom banner feature display in home page
function carolinaspa_banner()
{ ?>
<div class="banner">
    <div class="col-4">
        <h3><?php homepage_fields_get_meta('homepage_fields_banner_text');  ?></h3>
    </div>
</div>
 <?php
 }
add_action('homepage', 'carolinaspa_banner', 80);

This is the meta box code plugin code:

function homepage_fields_get_meta($value)
{
global $post;

$field = get_post_meta($post->ID, $value, true);
if (!empty($field)) {
    return is_array($field) ? stripslashes_deep($field) : stripslashes(wp_kses_decode_entities($field));
} else {
    return false;
}
}

function homepage_fields_add_meta_box()
{
add_meta_box(
    'homepage_fields-homepage-fields',
    'homepage_fields',
    'homepage_fields_html',
    'page',
    'normal',
    'high'
);
}
add_action('add_meta_boxes', 'homepage_fields_add_meta_box');

function homepage_fields_html($post)
{
wp_nonce_field('_homepage_fields_nonce', 'homepage_fields_nonce'); ?>

<p>
    <label for="homepage_fields_banner_text"><?php _e('Banner Text'); ?></label><br>
    <input type="text" name="homepage_fields_banner_text" id="homepage_fields_banner_text" value="<?php echo homepage_fields_get_meta('homepage_fields_banner_text'); ?>" size="30" />
</p><?php
    }

    function homepage_fields_save($post_id)
    {
        if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
        if (!isset($_POST['homepage_fields_nonce']) || !wp_verify_nonce($_POST['homepage_fields_nonce'], '_homepage_fields_nonce')) return;
        if (!current_user_can('edit_post', $post_id)) return;

        if (isset($_POST['homepage_fields_banner_text']))
            update_post_meta($post_id, 'homepage_fields_banner_text', esc_attr($_POST['homepage_fields_banner_text']));
    }
    add_action('save_post', 'homepage_fields_save');

I feel I have done everything correct, but I may be missing something?

I have tried working this out, but its proving to difficult. Any help will be appreciated. Thanks.

3
  • 1
    the function homepage_fields_get_meta() is returning the result - you need to echo it to show it on the front. i.e. <h3><?php echo homepage_fields_get_meta('homepage....
    – Michael
    Jan 28 '20 at 5:30
  • Ohh, okay, thanks Michael. The tutorial I am following doesn't include the echo, do you know why they just include the function alone?
    – Krys
    Jan 28 '20 at 5:34
  • 1
    In any language, pascal, c++, php, etc variable or function results you want the end user to see must explicitly be printed to the screen (via echo in this case). It allows you to work with results, manipulate such as formatting date strings etc. and only show the user what you want them to see. Not sure why tutorial left it out, perhaps they assumed you already knew about echoing to the screen. Jan 28 '20 at 5:56
0

I see that you guys might have solved this issue in the comments, but others might end up here, looking for an answer, so let's give it to them! :)

As pointed out by Michael, the problem here is that you didn't echo out the content. But there are also some other issues that should be fixed.

Whenever you are outputting or saving anything in WordPress, make sure you escape it. This is one of the parts of the WordPress Coding Standards, a set of rules made to keep a level of quality and consistency in your code.

In your functions.php, change this:

<h3><?php homepage_fields_get_meta('homepage_fields_banner_text');  ?></h3>

to this:

<h3><?php echo esc_html(homepage_fields_get_meta('homepage_fields_banner_text')); ?></h3>

The function esc_html escapes a string from any bad characters, so that you can use it in html without anything breaking.

In the metabox plugin code, replace

_e( 'Banner Text' );

With

esc_html_e( 'Banner Text' );

The function esc_html_e displays translatable strings, escaped, safe to use in html.

On the row below

<input type="text" name="homepage_fields_banner_text" id="homepage_fields_banner_text" value="<?php echo homepage_fields_get_meta( 'homepage_fields_banner_text' ); ?>" size="30" />

The function esc_attr escapes strings to be safe to use as attributes.

<input type="text" name="homepage_fields_banner_text" id="homepage_fields_banner_text" value="<?php echo esc_attr(homepage_fields_get_meta( 'homepage_fields_banner_text' ) ); ?>" size="30" />

Good read:

Check out the guide for data sanitization and escaping on WordPress.org.

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.