Shortcodes are not working in custom metabox

Question

I am having issue with WordPress meta boxes. actually I am using WordPress Genesis framework and in child theme I had create few meta boxes for my client to show some content before the page content, but in the custom meta box i am using wp-editor and its working fine. but the issue is that when I try to use some shortcodes in this wp-editor then it won't show me anything, it is just returning the whole shortcode as it is.

I am using https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress for custom meta boxes.

And my codes are in function.php file:

/* -------------------------------------------------------------------------- */
/* Setup Custom metaboxes                                                     */
/* -------------------------------------------------------------------------- */
add_action( 'init', 'be_initialize_cmb_meta_boxes', 9999 );

function be_initialize_cmb_meta_boxes() {
    if ( !class_exists( 'cmb_Meta_Box' ) ) {
        require_once( CHILD_DIR . '/lib/metabox/init.php' );
    }
}

add_filter( 'cmb_meta_boxes', 'cmb_sample_metaboxes' );

function cmb_sample_metaboxes( array $meta_boxes ) {

    // Start with an underscore to hide fields from custom fields list
    $prefix = '_cmb_';

    $meta_boxes[] = array(
        'id'         => 'text_content',
        'title'      => 'Text Content',
        'pages'      => array( 'page', ), // Post type
        'context'    => 'normal',
        'priority'   => 'high',
        'show_names' => true, // Show field names on the left
        'fields'     => array(
            array(
                'name' => 'Custom Content',
                'desc' => 'This is a title description',
                'id'   => $prefix . 'custom_content',
                'type' => 'title',
            ),  
            array(
                'name' => 'Tab Name',
                'desc' => 'Please descibe the tab name (required)',
                'id'   => $prefix . 'tab_name',
                'type' => 'text',
            ),
            array(
                'name'    => 'Test wysiwyg',
                'desc'    => 'field description (optional)',
                'id'      => $prefix . 'test_wysiwyg',
                'type'    => 'wysiwyg',
                'options' => array( 'textarea_rows' => 5, ),
            ),
        ),
    );

    return $meta_boxes;
}

I save the codes in page.php as:

add_action('genesis_before_loop', 'ehline_before_loop_content');

function ehline_before_loop_content() 
{
    echo genesis_get_custom_field( '_cmb_tab_name' );
    echo '<br />';
    echo genesis_get_custom_field( '_cmb_test_wysiwyg' );
}
genesis();

But when I use the shortcodes in this meta box it return something like that

[wptabtitle] Tab 01[/wptabtitle] [wptabcontent]test[/wptabcontent]

Please anyone tell me how can I make it to use shortcodes in the wp-editor.

Answer 1

You need to call do_shortcode() for the content of your custom fields. Here is how the updated code should look like:

add_action('genesis_before_loop', 'ehline_before_loop_content');

function ehline_before_loop_content() 
{
    echo do_shortcode( genesis_get_custom_field( '_cmb_tab_name' ) );
    echo '<br />';
    echo do_shortcode( genesis_get_custom_field( '_cmb_test_wysiwyg' ) );
}
genesis();

Also this will not add the auto-paragraphs that you would usually see for your posts contents. You can do two things:

echo apply_filters( 'the_content', genesis_get_custom_field( '_cmb_tab_name' ) );

or

echo wpautop( do_shortcode( genesis_get_custom_field( '_cmb_tab_name' ) ) );

In theory the first one should be better, but sometimes you might get additional output from functions that hook to the the_content filter.