Bringing Metaboxes to the Front End

Justin Sternberg edited this page Jul 6, 2016 · 6 revisions

With CMB2, we have a few helper functions that allow us to display metabox forms on the front-end of our site (or anywhere, really).

Note: If you use cmb2_admin_init, like in the example_functions.php file, to register your metaboxes, they will not be available on the front end. Use cmb2_init instead.

<?php cmb2_metabox_form( $meta_box, $object_id, $args ); ?>

OR to return the form for use in your code:

<?php $form = cmb2_get_metabox_form( $meta_box, $object_id, $args ); ?>

The first parameter $meta_box, can take a single metabox config array or metabox id. In our case, we'll use our metabox id to select and display the right metabox wherever we want:

<?php
// This is the WordPress post ID where the data should be stored/displayed.
$object_id = 2;
$metabox_id = 'test_metabox';

cmb2_metabox_form( $metabox_id, $object_id );
?>

Metabox Shortcode

Now, for real world usage, let's add this in the form of a shortcode:

<?php
add_shortcode( 'cmb-form', 'cmb2_do_frontend_form_shortcode' );
/**
 * Shortcode to display a CMB2 form for a post ID.
 * @param  array  $atts Shortcode attributes
 * @return string       Form HTML markup
 */
function cmb2_do_frontend_form_shortcode( $atts = array() ) {
	global $post;

	/**
	 * Depending on your setup, check if the user has permissions to edit_posts
	 */
	if ( ! current_user_can( 'edit_posts' ) ) {
		return __( 'You do not have permissions to edit this post.', 'lang_domain' );
	}

	/**
	 * Make sure a WordPress post ID is set.
	 * We'll default to the current post/page
	 */
	if ( ! isset( $atts['post_id'] ) ) {
		$atts['post_id'] = $post->ID;
	}

	// If no metabox id is set, yell about it
	if ( empty( $atts['id'] ) ) {
		return __( "Please add an 'id' attribute to specify the CMB2 form to display.", 'lang_domain' );
	}

	$metabox_id = esc_attr( $atts['id'] );
	$object_id = absint( $atts['post_id'] );
	// Get our form
	$form = cmb2_get_metabox_form( $metabox_id, $object_id );

	return $form;
}

Adding this shortcode to your WordPress editor would look something like this:

[cmb-form id="test_metabox"]

Or to specify a specific post ID for saving and retrieving the values from, att a post_id parameter to the shortcode:

[cmb-form id="test_metabox" post_id=2]

With this shortcode, you'll be able to add any metabox to the front-end. Just specify which metabox to use, and (optionally) which WordPress post ID (or user/comment ID) to be editing.

Documentation:

  1. Home

  2. Installation
    Installation instructions for various environments

  3. Basic Usage
    Get up and running

  4. Advanced Usage
    Not for the faint of heart

  5. Field Types
    Breakdown of field types

  6. Examples
    Examples for registering fields

  7. Field Parameters
    Breakdown of common field parameters

  8. Display Options
    Limit display of boxes

  9. Box Properties
    Breakdown of box properties

  10. Troubleshooting
    Common issues & how to deal with them

  11. Notable Changes in CMB2 (from original CMB)
    CMB2 — a complete re-write

  12. Tips & Tricks
    10x your CMB2 skills

  13. REST API
    CMB2 data through WordPress REST API

  14. Javascript API
    Work with CMB2 JS events & hooks

Advanced tutorials:

External Resources:

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.