WordPress CMB2 - Get Option Value

Question

I am using the example from the CMB2 snippets library to add a theme options page in WordPress

/**
 * Hook in and register a metabox to handle a theme options page and adds a menu item.
 */
function yourprefix_register_main_options_metabox() {

    /**
     * Registers main options page menu item and form.
     */
    $args = array(
        'id'           => 'yourprefix_main_options_page',
        'title'        => 'Main Options',
        'object_types' => array( 'options-page' ),
        'option_key'   => 'yourprefix_main_options',
        'tab_group'    => 'yourprefix_main_options',
        'tab_title'    => 'Main',
    );

    // 'tab_group' property is supported in > 2.4.0.
    if ( version_compare( CMB2_VERSION, '2.4.0' ) ) {
        $args['display_cb'] = 'yourprefix_options_display_with_tabs';
    }

    $main_options = new_cmb2_box( $args );

    /**
     * Options fields ids only need
     * to be unique within this box.
     * Prefix is not needed.
     */
    $main_options->add_field( array(
        'name'    => 'Site Background Color',
        'desc'    => 'field description (optional)',
        'id'      => 'bg_color',
        'type'    => 'colorpicker',
        'default' => '#ffffff',
    ) );

    /**
     * Registers secondary options page, and set main item as parent.
     */
    $args = array(
        'id'           => 'yourprefix_secondary_options_page',
        'menu_title'   => 'Secondary Options', // Use menu title, & not title to hide main h2.
        'object_types' => array( 'options-page' ),
        'option_key'   => 'yourprefix_secondary_options',
        'parent_slug'  => 'yourprefix_main_options',
        'tab_group'    => 'yourprefix_main_options',
        'tab_title'    => 'Secondary',
    );

    // 'tab_group' property is supported in > 2.4.0.
    if ( version_compare( CMB2_VERSION, '2.4.0' ) ) {
        $args['display_cb'] = 'yourprefix_options_display_with_tabs';
    }

    $secondary_options = new_cmb2_box( $args );

    $secondary_options->add_field( array(
        'name'    => 'Test Radio',
        'desc'    => 'field description (optional)',
        'id'      => 'radio',
        'type'    => 'radio',
        'options' => array(
            'option1' => 'Option One',
            'option2' => 'Option Two',
            'option3' => 'Option Three',
        ),
    ) );

    /**
     * Registers tertiary options page, and set main item as parent.
     */
    $args = array(
        'id'           => 'yourprefix_tertiary_options_page',
        'menu_title'   => 'Tertiary Options', // Use menu title, & not title to hide main h2.
        'object_types' => array( 'options-page' ),
        'option_key'   => 'yourprefix_tertiary_options',
        'parent_slug'  => 'yourprefix_main_options',
        'tab_group'    => 'yourprefix_main_options',
        'tab_title'    => 'Tertiary',
    );

    // 'tab_group' property is supported in > 2.4.0.
    if ( version_compare( CMB2_VERSION, '2.4.0' ) ) {
        $args['display_cb'] = 'yourprefix_options_display_with_tabs';
    }

    $tertiary_options = new_cmb2_box( $args );

    $tertiary_options->add_field( array(
        'name' => 'Test Text Area for Code',
        'desc' => 'field description (optional)',
        'id'   => 'textarea_code',
        'type' => 'textarea_code',
    ) );

}
add_action( 'cmb2_admin_init', 'yourprefix_register_main_options_metabox' );

/**
 * A CMB2 options-page display callback override which adds tab navigation among
 * CMB2 options pages which share this same display callback.
 *
 * @param CMB2_Options_Hookup $cmb_options The CMB2_Options_Hookup object.
 */
function yourprefix_options_display_with_tabs( $cmb_options ) {
    $tabs = yourprefix_options_page_tabs( $cmb_options );
    ?>
    <div class="wrap cmb2-options-page option-<?php echo $cmb_options->option_key; ?>">
        <?php if ( get_admin_page_title() ) : ?>
            <h2><?php echo wp_kses_post( get_admin_page_title() ); ?></h2>
        <?php endif; ?>
        <h2 class="nav-tab-wrapper">
            <?php foreach ( $tabs as $option_key => $tab_title ) : ?>
                <a class="nav-tab<?php if ( isset( $_GET['page'] ) && $option_key === $_GET['page'] ) : ?> nav-tab-active<?php endif; ?>" href="<?php menu_page_url( $option_key ); ?>"><?php echo wp_kses_post( $tab_title ); ?></a>
            <?php endforeach; ?>
        </h2>
        <form class="cmb-form" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" method="POST" id="<?php echo $cmb_options->cmb->cmb_id; ?>" enctype="multipart/form-data" encoding="multipart/form-data">
            <input type="hidden" name="action" value="<?php echo esc_attr( $cmb_options->option_key ); ?>">
            <?php $cmb_options->options_page_metabox(); ?>
            <?php submit_button( esc_attr( $cmb_options->cmb->prop( 'save_button' ) ), 'primary', 'submit-cmb' ); ?>
        </form>
    </div>
    <?php
}

/**
 * Gets navigation tabs array for CMB2 options pages which share the given
 * display_cb param.
 *
 * @param CMB2_Options_Hookup $cmb_options The CMB2_Options_Hookup object.
 *
 * @return array Array of tab information.
 */
function yourprefix_options_page_tabs( $cmb_options ) {
    $tab_group = $cmb_options->cmb->prop( 'tab_group' );
    $tabs      = array();

    foreach ( CMB2_Boxes::get_all() as $cmb_id => $cmb ) {
        if ( $tab_group === $cmb->prop( 'tab_group' ) ) {
            $tabs[ $cmb->options_page_keys()[0] ] = $cmb->prop( 'tab_title' )
                ? $cmb->prop( 'tab_title' )
                : $cmb->prop( 'title' );
        }
    }

    return $tabs;
}

This works great, but I can't figure out how to actually get one of these values and display it in a theme. Anyone have an example?

Answer 1

You can use cmb2_get_option()

It takes 3 parameters: cmb2_get_option( $option_key, $field_id, $default );

So in your case:

$option_key = yourprefix_main_options, 
$field_id = bg_color, 
$default = the default value (in case you set it).

It should look like this:

cmb2_get_option( 'yourprefix_main_options', 'bg_color' );
cmb2_get_option( 'yourprefix_secondary_options', 'radio' );

and so on ..

Also, You can use your own function with Fallback:

/**
 * Wrapper function around cmb2_get_option
 * @since  0.1.0
 * @param  string $key     Options array key
 * @param  mixed  $default Optional default value
 * @return mixed           Option value
 */
function myprefix_get_option( $key = '', $default = false ) {
    if ( function_exists( 'cmb2_get_option' ) ) {
        // Use cmb2_get_option as it passes through some key filters.
        return cmb2_get_option( 'yourprefix_main_options', $key, $default );
    }

    // Fallback to get_option if CMB2 is not loaded yet.
    $opts = get_option( 'yourprefix_main_options', $default );

    $val = $default;

    if ( 'all' == $key ) {
        $val = $opts;
    } elseif ( is_array( $opts ) && array_key_exists( $key, $opts ) && false !== $opts[ $key ] ) {
        $val = $opts[ $key ];
    }

    return $val;
}

Use it like this:

 myprefix_get_option( bg_color )

Answer 2

Please use the following code :

get_option("<your id>");

Like :

get_option('bg_color');

Hope this will work for you.

Answer 3

You can try using array system with get_option() function.

First time you need to use get_option('your-option-key'); like your option-key is "yourprefix_main_options" so you need to use get_option('yourprefix_main_options');

then you can keep your value on variable. like

$main_option_data = get_option('yourprefix_main_options');

then you can use $main_option_data and your filed id as a array. like your one filed id is bg_color so you can use $main_option_data['bg_color'];

You can check my one previous work, I think it will be help you.

// Theme Options
add_action( 'cmb2_admin_init', 'mosc_panel_theme_options_metabox' );
/**
 * Hook in and register a metabox to handle a theme options page and adds a menu item.
 */
function mosc_panel_theme_options_metabox() {
    /**
     * Registers options page menu item and form.
     */
    $mos_option_panel = new_cmb2_box( array(
        'id'           => 'mosc_theme_options_page',
        'title'        => esc_html__( 'Theme Options', 'cmb2' ),
        'parent_slug'     => 'themes.php', // Make options page a submenu item of the themes menu.
        'object_types' => array( 'options-page' ),
        'option_key'      => 'mosc_theme_options', // The option key and admin menu page slug.
        'icon_url'        => 'dashicons-palmtree', // Menu icon. Only applicable if 'parent_slug' is left empty.
    ) );

    // Regular text field
    $mos_option_panel->add_field( array(
        'name'       => __( 'Contact Form Heading', 'mosc' ),
        'id'         => 'mosc-contact-form-heading',
        'type'       => 'text',
        'default'    => __('Feel free to drop me a line', 'mosc'),
    ) );


}

then I've used this code for show my field value.

$mosc_contact_heading = get_option('mosc_theme_options');
if(!empty($mosc_contact_heading['mosc-contact-form-heading'])) {
    echo esc_html($mosc_contact_heading['mosc-contact-form-heading']); 
}