Most companies and organizations want to have a page where they can display their team (whether that includes employees, book club members, volunteers–you name it!).
You can find lots of plugins at WordPress.org that can create this kind of page; they offer a wide range of features like responsiveness, a single page view for each member, lots of pre-built styles, and more. As you may already know, though, we’re big fans of CMB2; today I want to show you how you can use it to create a team page that makes your team look great using just CMB2 and few lines of custom code.
First, we need to register our form and fields:
https://gist.github.com/Mamaduka/f97dd20f5c79b18259b4
This method is using the new CMB2 form and field registration API, introduced in version 2.0.2.
Let’s break down this code snippet:
- We’re adding a “Team Member” metabox to the “page” post type.
- ‘show_on’ adds conditions indicating when to display this metabox. In this case, we only want to display it when the page template is set to ‘full-width.php’.
- Then, we’re adding a repeatable group field, with three additional fields – Full name, position and photo.
After your form and fields are registered, we can start working on how to display our awesome team on the desired pages. In this example, we’ll be using WordPress’ Shortcode API.
Now, let us register a shortcode called ‘maintainn_team’:
https://gist.github.com/Mamaduka/e7725a9b789c2386a676
This shortcode will get the current post using the ‘get_post()’ function. It then retrieves the team data stored in post meta using the ‘_maintainn_team_meta’ meta key.
Now, we can display our team members on the page. Obviously, we’ll need to add some styling to match our design, but below you can see the final results, using the Twenty Twelve theme, and only fifteen lines of custom CSS.
And there you have it! It’s super easy. Add this to the list of one of the many things you can do with CMB2 (and if you want more how-tos with CMB2, check out Justin Sternberg’s post on how to wield CMB2 to create a new post submission form as well). Have any questions? Throw them in the comments!
Thanks for the CMB2 how-to. I just started learning about CMB2 and looking for more examples that take it all the way to the browser. So many seem to end with the creation of meta boxes in the backend.
I’ve got all these nice demo meta boxes on post and page backend an trying to figure out what to do with them! Do you usually create short codes to display meta data in the browser? Can you display just as well without short codes? If so, I would like to see that.
Thanks again,
Mark
http://marklovettdesign.com
Nice job on the article George!
How did you know what meta key name to use in get_post_meta( $post->ID, ‘_maintainn_team_meta’, true ) ?
Thanks,
Mark
http://marklovettdesign.com
I wanted to see if I code display your Team Member meta box and fields without using a short code, so I wrote the below hack. Please let me know if you can recommend a better way to display without using shortcode. I simply changed the output return to echo output, changed add_filter to add_action, changed the filter hook to an action hook …. the_post, and changed the name of the callback.
function maintainn_team_members() {
// Get current post object.
$post = get_post();
// Get team members data, attached to this page, using ‘_maintainn_team_meta’ meta key.
$members = get_post_meta( $post->ID, ‘_maintainn_team_meta’, true );
$output = ”;
// Return empty string, if we don’t have members.
if ( empty( $members ) ) {
return $output;
}
// We have team members and now we can output them.
$output .= ”;
foreach ( $members as $member ) {
$output .= ”;
$output .= ”;
$output .= ” . esc_attr( $member[‘fullname’] ) . ”;
$output .= ” . esc_attr( $member[‘position’] ) . ”;
$output .= ”;
}
$output .= ”;
echo $output;
}
add_action( ‘the_post’, ‘maintainn_team_members’ );
Thanks,
Mark
http://marklovettdesign.com
My code didnt come through last time.
`
function maintainn_team_members() {
// Get current post object.
$post = get_post();
// Get team members data, attached to this page, using ‘_maintainn_team_meta’ meta key.
$members = get_post_meta( $post->ID, ‘_maintainn_team_meta’, true );
$output = ”;
// Return empty string, if we don’t have members.
if ( empty( $members ) ) {
return $output;
}
// We have team members and now we can output them.
$output .= ”;
foreach ( $members as $member ) {
$output .= ”;
$output .= ”;
$output .= ” . esc_attr( $member[‘fullname’] ) . ”;
$output .= ” . esc_attr( $member[‘position’] ) . ”;
$output .= ”;
}
$output .= ”;
echo $output;
}
add_action( ‘the_post’, ‘maintainn_team_members’ );
`